Динамически добавлять диаграммы с chart.js

Question

Я пытаюсь добавить круговые диаграммы, используя chart.js. Но вместо добавления данных в js-файле мне нужно создавать диаграммы с использованием данных HTML. Вот мой HTML:

<div class="chart-container"> 
    <canvas width="160" height="160"></canvas> 
    <ul class="chart-data"> 
     <li data-value="100" data-color="#ff4d4d">Legend One</li> 
     <li data-value="20" data-color="#ff7171">Legend Two</li> 
     <li data-value="80" data-color="#ff9797">Legend Three</li> 
    </ul> 
</div><!-- /chart-container --> 

Мне нужна каждая диаграмма, чтобы получить данные о родном брате.

Вот мои ЯШ:

function pieChart2(){ 

    var chartContainer = $('.chart-container'), 
     chartCanvas = chartContainer.find('canvas'), 
     chartData = []; 

    chartCanvas.each(function(){ 
     var $this = $(this), 
      ctx = $this.get(0).getContext("2d"); 

     window.myDoughnut = new Chart(ctx).Doughnut(chartData, { 
      segmentShowStroke : false, 
      showTooltips: false, 
      percentageInnerCutout : 55 
     }); 
    }); 
}; 
pieChart2(); 

Answer 1

Ok в любом случае я решить сам. Вот ответ для другого, если у вас такая же проблема. Извините, если в моем js есть плохие практики. Я не профессионал.

function pieChart2(){ 

    var chartContainer = $('.chart-container'); 

    chartContainer.each(function(index){ 
     var $this = $(this), 
      canvas = $this.find('canvas'), 
      ctx = canvas.get(0).getContext("2d"), 
      chartData = []; 

     $this.find('.chart-data').find('li').each(function(){ 
      var li = $(this); 

      chartData.push({ 
       value: li.data('value'), 
       color: li.data('color'), 
       label: li.text() 
      }) 
     }); 

     window.myDoughnut = new Chart(ctx).Doughnut(chartData, { 
      segmentShowStroke : false, 
      showTooltips: false, 
      percentageInnerCutout : 55, 
      legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>" 
     }); 
     var legend = myDoughnut.generateLegend(); 
     $this.append(legend); 
    }); 

}; 
pieChart2(); 

Answer 2

Чтобы создать новые графики для вставленных элементов динамики, вы можете создать DOM Observer. Я создаю скрипку с, например, в

\t $(function() { 
 
\t $('.graph').each(function(index, canvas) { 
 
\t  createGraph(
 
     \t canvas, 
 
     $(canvas).data('labels'), 
 
     $(canvas).data('datasets'), 
 
     $(canvas).data('options') 
 
    ); 
 
     $(canvas).data('renderizado', true); 
 
\t }); 
 
    
 
    $(document).on('DOMNodeInserted', function(e) { 
 
     if ($(e.target).hasClass('graph')) { 
 
      createGraph(
 
      e.target, 
 
      $(e.target).data('labels'), 
 
      $(e.target).data('datasets'), 
 
      $(e.target).data('options') 
 
      ); 
 
      $(e.target).data('renderizado', true); 
 
     } 
 
    }); 
 
    
 
    $('#adicionar').on('click', function() { 
 
\t \t $('#graphs').append('<canvas width="400" height="250" class="graph" data-options=\'{"showLines": true}\' data-renderizado=false data-labels=\'["January","February","March","April","May","June","July"]\' data-datasets=\'[{"label":"My First dataset","fill":false,"lineTension":0.1,"backgroundColor":"rgba(75,192,192,0.4)","borderColor":"rgba(75,192,192,1)","borderCapStyle":"butt","borderDash":[],"borderDashOffset":0.0,"borderJoinStyle":"miter","pointBorderColor":"rgba(75,192,192,1)","pointBackgroundColor":"#fff","pointBorderWidth":1,"pointHoverRadius":5,"pointHoverBackgroundColor":"rgba(75,192,192,1)","pointHoverBorderColor":"rgba(220,220,220,1)","pointHoverBorderWidth":2,"pointRadius":5, "pointHitRadius":10,"data":[56, 55, 40, 65, 59, 80, 0]}]\'></canvas>'); 
 
\t \t \t }); 
 
\t }); 
 

 
\t function createGraph (canvas, labels, datasets, options) { 
 
\t \t Chart.Line(canvas,{ 
 
\t  data:{labels: labels, datasets: datasets}, 
 
\t  options:options 
 
\t }); 
 
\t }

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="graphs"> 
 
    <canvas width="400" height="250" class="graph" data-options='{"showLines": true}' data-renderizado=false 
 
    \t \t data-labels='["January","February","March","April","May","June","July"]' 
 
      data-datasets='[{"label":"My First dataset","fill":false,"lineTension":0.1,"backgroundColor":"rgba(75,192,192,0.4)","borderColor":"rgba(75,192,192,1)","borderCapStyle":"butt","borderDash":[],"borderDashOffset":0.0, "borderJoinStyle":"miter","pointBorderColor":"rgba(75,192,192,1)","pointBackgroundColor":"#fff", "pointBorderWidth":1,"pointHoverRadius":5,"pointHoverBackgroundColor":"rgba(75,192,192,1)","pointHoverBorderColor":"rgba(220,220,220,1)","pointHoverBorderWidth":2,"pointRadius":5, "pointHitRadius":10,"data":[65, 59, 80, 0, 56, 55, 40]}]'></canvas> 
 
</div> 
 
<input type="button" value="Add Data" id="adicionar">