Динамическая генерация диаграммы: JS, JQuery, CSS

У меня есть код, который не работает полностью ... В настоящее время он генерирует гистограмму из массива, но я не могу понять, как передавать уникальные значения высоты. Если я передаю одно значение для высоты, все бары имеют одинаковую высоту. Если я передаю массив для значений высоты, это не сработает.Динамическая генерация диаграммы: JS, JQuery, CSS

У меня есть git repo, если это помогает.

HTML

<!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%; } 
}

источник

2016-10-21 sbaden

$ ('бар') CSS ('height', 'value'); // Это не работает - опечатка я предполагаю? поскольку «значение» не должно быть в кавычках. Вероятно, это css ('height', (value + 'px') или что-то – JARRRRG

Да, но даже когда я беру кавычки, он все равно не работает. Каждый класс бара должен быть уникальным? – sbaden

Я что класс bar фактически принимает последнее значение в массиве (1), поскольку это значение, поэтому бары не имеют собственного уникального значения. – sbaden

У вас есть пара проблем здесь происходит. Во-первых, каждый бар имеет класс 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/

источник

2016-10-22 00:26:27

Намного более элегантное и чистое решение! – sbaden

Можете ли вы рассказать мне, почему мой разделитель bar-wrapper не отображается внутри моего div-обертки? Вы можете увидеть это на своем jsfiddle link - У меня есть граница на графической оболочке. – sbaden

Вы устанавливаете flexbox атрибуты контейнера в элементах flexbox. См. Https://css-tricks.com/snippets/css/a-guide-to-flexbox/ для хорошей записи при использовании flexbox –

Динамическая генерация диаграммы: JS, JQuery, CSS

ответ

Смежные вопросы