Charts.jsのforループ/ foreachループを追加する

Question

foreachまたはforループ内に以下のコードを追加して、charts.jsの複数のデータセットを作成しようとしています。これにより、この折れ線グラフ上に複数の線を作成することができます。

私は後で変数を埋め込むためにエンコードすることができるPHPオブジェクトを持っていますが、複数のデータセットを作成するためだけにどのようにループを注入できますか？

<script> 
var chart1Handler = function() { 
var data = { 
    labels: {!! json_encode($month_array) !!}, 
    datasets: [{ 
      label:'', 
      fillColor: 'rgba(220,220,220,0.2)', 
      strokeColor: 'rgba(220,220,220,1)', 
      pointColor: 'rgba(220,220,220,1)', 
      pointStrokeColor: '#fff', 
      pointHighlightFill: '#fff', 
      pointHighlightStroke: 'rgba(220,220,220,1)', 
      data: {{ json_encode($new_taco) }} 
    }] 
}; 

var options = { 

    maintainAspectRatio: false, 

    // Sets the chart to be responsive 
    responsive: true, 

    ///Boolean - Whether grid lines are shown across the chart 
    scaleShowGridLines: true, 

    //String - Colour of the grid lines 
    scaleGridLineColor: 'rgba(0,0,0,.05)', 

    //Number - Width of the grid lines 
    scaleGridLineWidth: 1, 

    //Boolean - Whether the line is curved between points 
    bezierCurve: false, 

    //Number - Tension of the bezier curve between points 
    bezierCurveTension: 0.4, 

    //Boolean - Whether to show a dot for each point 
    pointDot: true, 

    //Number - Radius of each point dot in pixels 
    pointDotRadius: 4, 

    //Number - Pixel width of point dot stroke 
    pointDotStrokeWidth: 1, 

    //Number - amount extra to add to the radius to cater for hit detection outside the drawn point 
    pointHitDetectionRadius: 20, 

    //Boolean - Whether to show a stroke for datasets 
    datasetStroke: true, 

    //Number - Pixel width of dataset stroke 
    datasetStrokeWidth: 2, 

    //Boolean - Whether to fill the dataset with a colour 
    datasetFill: true, 

    // Function - on animation progress 
    onAnimationProgress: function() { 
    }, 

    // Function - on animation complete 
    onAnimationComplete: function() { 
    }, 

    //String - A legend template 
    legendTemplate: '<ul class="tc-chart-js-legend"><% for (var i=0; i<datasets.length; i++){%><li><span style="background-color:<%=datasets[i].strokeColor%>"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>' 
}; 
// Get context with jQuery - using jQuery's .get() method. 
var ctx = $("#chart1").get(0).getContext("2d"); 
// This will get the first returned node in the jQuery collection. 
var chart1 = new Chart(ctx).Line(data, options); 
//generate the legend 
var legend = chart1.generateLegend(); 
//and append it to your page somewhere 
$('#chart1Legend').append(legend); 

}; 

</script> 

Answer 1

PHPコードでデータセット配列を作成し、jsonとしてJSに渡すことができます。それを使用する前に解析するだけです。 PHPで

： JSで

$datasets = [ 
    [ 
     'label'=>'', 
     'fillColor'=> 'rgba(220,220,220,0.2)', 
     'strokeColor'=> 'rgba(220,220,220,1)', 
     'pointColor'=> 'rgba(220,220,220,1)', 
     'pointStrokeColor'=> '#fff', 
     'pointHighlightFill'=> '#fff', 
     'pointHighlightStroke'=> 'rgba(220,220,220,1)', 
     'data' => [1,2,3] 
    ], 
    [ 
     'label'=>'', 
     'fillColor'=> 'rgba(220,220,220,0.2)', 
     'strokeColor'=> 'rgba(220,220,220,1)', 
     'pointColor'=> 'rgba(220,220,220,1)', 
     'pointStrokeColor'=> '#fff', 
     'pointHighlightFill'=> '#fff', 
     'pointHighlightStroke'=> 'rgba(220,220,220,1)', 
     'data' => [1,2,3] 
    ] 
]; 
$datasets = json_encode($datasets); 

：

var data = { 
    labels: {!! json_encode($month_array) !!}, 
    datasets: JSON.parse('<?=$datasets?>') 
}; 

ところで、私はそれがJSの配列をしても、JSON文字列と同じように扱われていないことを言及する価値だと思います彼らはかなり似ていますが。だから、私は実装の詳細を見ていないのに、labelsの値としてJSONの代わりに配列を渡す必要があると仮定します。ここでもデータセットと同じアプローチを使用できます。