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

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

javascript chart.js

Javascript 为Charts.js添加for循环/foreach循环,javascript,foreach,chart.js,Javascript,Foreach,Chart.js,我试图在下面的代码中添加foreach或for循环，以便为charts.js创建多个数据集。这将允许我在这个折线图上创建多条线我有一个PHP对象，我可以对它进行编码以在以后填充变量，但是如何以及在何处注入循环以只创建多个数据集呢 <script> var chart1Handler = function() { var data = { labels: {!! json_encode($month_array) !!}, datasets: [{

我试图在下面的代码中添加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>


var chart1Handler=函数（）{
风险值数据={
标签：{！！json\u encode（$month\u array）！！}，
数据集：[{
标签：“”，
fillColor:'rgba（220220,0.2）'，
strokeColor:“rgba（2201）”，
pointColor:'rgba（220220,1）'，
pointStrokeColor:“#fff”，
pointHighlightFill:“#fff”，
pointHighlightStroke:'rgba（2201,1）'，
数据：{{json_encode（$new_taco）}
}]
};
变量选项={
MaintaintAspectRatio:false，
//将图表设置为响应
回答：是的，
///布尔值-是否在图表中显示网格线
scaleShowGridLines：对，
//字符串-网格线的颜色
scaleGridLineColor:'rgba（0,0,0,05）'，
//Number—网格线的宽度
scaleGridLineWidth:1，
//布尔-点之间的直线是否弯曲
贝塞尔曲线：错，
//数字-点之间贝塞尔曲线的张力
Bezier曲线长度：0.4，
//布尔值-是否为每个点显示点
是的，
//Number-每个点的半径（以像素为单位）
点半径：4，
//数字-点-点笔划的像素宽度
pointDotStrokeWidth:1，
//数字-添加到半径的额外数量，以满足绘制点外的命中检测
PointHit检测半径：20，
//布尔值-是否显示数据集的笔划
datasetStroke：对，
//数字-数据集笔划的像素宽度
datasetStrokeWidth:2，
//布尔值-是否用颜色填充数据集
datasetFill:true，
//功能-动画进展
onAnimationProgress:函数（）{
},
//函数-动画完成
onAnimationComplete:function（）{
},
//字符串-图例模板
legendTemplate:“”
};
//使用jQuery获取上下文-使用jQuery的.Get（）方法。
var ctx=$（“#图表1”）.get（0.getContext（“2d”）；
//这将获得jQuery集合中返回的第一个节点。
var chart1=新图表（ctx）.Line（数据、选项）；
//生成图例
var legend=chart1.generateLegend（）；
//并将其附加到页面的某个位置
$（#chart1Legend'）。追加（图例）；
};

您可以在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);

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

在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?>')
};

var数据={
标签：{！！json\u encode（$month\u array）！！}，
数据集：JSON.parse（“”）
};

顺便说一句，我认为值得一提的是，JS数组与JSON字符串的处理方式不同，尽管它们看起来非常相似。因此，尽管我没有看到实现的很多细节，但我假设您需要传递数组而不是JSON作为

标签的值。您也可以使用与这里的数据集相同的方法。
您可以在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);

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

在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?>')
};

var数据={
标签：{！！json\u encode（$month\u array）！！}，
数据集：JSON.parse（“”）
};

顺便说一句，我认为值得一提的是，JS数组与JSON字符串的处理方式不同，尽管它们看起来非常相似。因此，尽管我没有看到实现的很多细节，但我假设您需要传递数组而不是JSON作为标签的值。您也可以使用与这里的数据集相同的方法。
这应该绝对有效，我将在这里稍作更新以确保它有效。就标签属性而言，这将始终是一个完整的日历年，所以我现在可以硬编码它。非常感谢，我会告诉你结果的！那很快。我们可以走了。谢谢你@trajchevska，你真是棒极了！这应该绝对有效，我会在这里更新一点，以确保它确实有效。就标签属性而言，这将始终是一个完整的日历年，所以我现在可以硬编码它。非常感谢，我会告诉你结果的！那很快。我们可以走了。谢谢你@trajchevska，你真是棒极了！