动态生成条形图:JS, Jquery, CSS

我有一些代码不能完全工作…目前它从数组生成一个条形图，但我不知道如何传递唯一的高度值。如果我为高度传递一个值所有的条都是相同的高度。如果我传递一个数组的高度值，它不会工作。

如果有帮助的话，我有一个git仓库。

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <link rel="stylesheet" href="style.css">
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>
        <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
        <script src="main.js"></script>
    </head>
    <body>
        <div class="graph-wrapper">
            <script id="barGraph-template" type="text/x-handlebars-template">
                <div class="bar-wrapper">
                    <div class="bar"></div>
                    <div class="title">{{charCount}}</div>    
                </div>
            </script>
        </div> <!-- end graph-wrapper -->
    </body>
</html>

$(document).ready(function(){
    var charArray = [2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14];
    var charValues = [10, 35, 90, 72, 50, 22, 16, 20, 10, 5, 2, 3, 1];
    var templateSource = $('#barGraph-template').html();
    var template = Handlebars.compile(templateSource);
    for (var key in charArray){ 
        // Bars are all the same height  
        // $('.bar').css('height','70%');
        // This sets all the bars to the same height w/the last value
        // in the array
        $('.bar').css('height', (charValues[key] + '%');
        var graph =  {
            charCount: charArray[key],
        }
        var readyTemplate = template(graph);
        $('body').append(readyTemplate);
    }      
});

CSS

.graph-wrapper { border: 1px solid #ccc; display: flex; padding: 10px; } .bar-wrapper { /*border: 1px solid #000;*/ display: inline-flex; /*Positions bars side by side*/ flex-direction: column; /*Stacks bar and label*/ justify-content: flex-end; /*Grows bar from bottom*/ align-items: center; /*Aligns bar label and bar on center horizontally*/ height: 200px; margin: 0px; } .title, .bar { } .bar { /*border: 1px solid #000;*/ /*height: 70%;*/ width: 30px; background: #00AEEF; bottom: 0px; -webkit-animation: animate-bar 1.25s 1 linear; } .title { } @-webkit-keyframes animate-bar { 0% { height: 0%; } }

这里有几个问题。首先，每个柱是bar类的$('.bar').css('height', 'value');将bar类的每个元素的高度改变为value的高度。其次，在这个字符串中有额外的引号:var value = "'" + charValues[key] + '%' + "'";。修改为var value = charValues[key] + '%';。第三，在将元素添加到dom之前尝试访问它们。直到下面的语句
才会添加它们:
$('body').append(readyTemplate);
下面的代码与您的代码类似，但是可以正常工作。https://jsfiddle.net/8f6Lcv8e/但是，有一个更干净的解决方案。

<script id="barGraph-template" type="text/x-handlebars-template"> <div class="bar-wrapper"> <div class="bar bar{{charCount}}"></div> <div class="title">{{charCount}}</div> </div> </script> $(document).ready(function(){ var charArray = [2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]; var charValues = [10, 35, 90, 72, 50, 22, 16, 20, 10, 5, 2, 3, 1]; var templateSource = $('#barGraph-template').html(); var template = Handlebars.compile(templateSource); for (var key in charArray){ var value = charValues[key] + '%'; var graph = { charCount: charArray[key], } var readyTemplate = template(graph); $('body').append(readyTemplate); $('.bar'+charArray[key]).css('height',value); } });
修改你的车把模板来接受一个对象数组

<script id="barGraph-template" type="text/x-handlebars-template"> {{#each .}} <div class="bar-wrapper"> <div class="bar" style="height:{{y}}%"></div> <div class="title">{{x}}</div> </div> {{/each}} </script>
你的javascript变成:

$(document).ready(function(){ var graph = [{x:2,y:10},{x:3,y:35},{x:4,y:90},{x:5,y:72},{x:6,y:50},{x:7,y:22},{x:8,y:16}, {x:9,y:20},{x:10,y:10},{x:11,y:5},{x:12,y:2},{x:13,y:3},{x:14,y:1}]; var templateSource = $('#barGraph-template').html(); var template = Handlebars.compile(templateSource); var readyTemplate = template(graph); $('body').append(readyTemplate); });
https://jsfiddle.net/agm9e31o/

相关内容

最新更新

热门标签：