Hinzufügen einer for-Schleife/foreach-Schleife für Charts.js

Question

Ich versuche, foreach oder for loop innerhalb des folgenden Codes hinzuzufügen, um mehrere Datasets für charts.js zu erstellen. Dadurch kann ich mehrere Linien in diesem Liniendiagramm erstellen.

Ich habe ein PHP-Objekt, das ich codieren kann, um Variablen später zu füllen, aber wie und wo kann ich eine Schleife einfügen, um nur mehrere Datensätze zu erstellen?

<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

Sie können Ihr Dataset-Array in Ihrem PHP-Code erstellen und als JSON an das JS übergeben. Sie müssen es dann einfach analysieren, bevor Sie es verwenden.

In PHP:

$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); 

In JS:

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

BTW Ich denke, es wert ist zu erwähnen, dass ein JS-Array nicht auf die gleiche Weise wie ein JSON-String behandelt wird, auch obwohl sie ziemlich ähnlich aussehen. Obwohl ich nicht viele Details der Implementierung gesehen habe, gehe ich davon aus, dass Sie ein Array anstelle von JSON als Wert für labels übergeben müssen. Sie können hier genauso vorgehen wie bei den Datensätzen.