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中：

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

在JS中：

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

BTW我认为值得一提的是，JS数组的处理方式与JSON字符串不同，即使它们看起来非常相似。因此，即使我没有看到有关实现的更多细节，我假设您需要传递一个数组而不是JSON作为labels的值。您也可以使用与数据集相同的方法。

为Charts.js添加for循环/ foreach循环

1 个答案: