如何在画布 js 中循环以制作多系列图表

How to loop in canvas js to make a multiple series chart?

本文关键字：系列 循环 js      更新时间：2023-09-26

我正在尝试使用 Canvasjs 制作多系列图表。我的问题是我无法在数据点内进行循环，所以我对所有内容进行了硬编码。有没有办法使用循环？

以下是 Json 数据：

[{"name":"Grace","label":"A","y":0},{"name":"Grace","label":"B","y":3},{"name":"Grace","label":"C","y":0},{"name":"Grace","label":"D","y":0},{"name":"Mirriam","label":"A","y":0},{"name":"Mirriam","label":"B","y":5},{"name":"Mirriam","label":"C","y":2},{"name":"Mirriam","label":"D","y":0},{"name":"Mar","label":"A","y":0},{"name":"Mar","label":"B","y":5},{"name":"Mar","label":"C","y":2},{"name":"Mar","label":"D","y":0},{"name":"Jejomar","label":"A","y":0},{"name":"Jejomar","label":"B","y":5},{"name":"Jejomar","label":"C","y":2},{"name":"Jejomar","label":"D","y":0}]

这是我的代码： 

<script type='text/javascript'>
 $(document).ready(function () {
$.getJSON('data.php', function (result) {
    var chart1 = new CanvasJS.Chart('Container', {
    title:{
        text: 'Results of Survey',
    },
    data: [
    {
        type: 'column',
        dataPoints: [
        { label:"A", y: result[0].y},
        { label:"B", y: result[1].y},
        { label:"C", y: result[2].y},
        { label:"D", y: result[3].y},
        ]
    },{
        type: 'column',
        dataPoints: [
        { label:"A", y: result[4].y},
        { label:"B", y: result[5].y},
        { label:"C", y: result[6].y},
        { label:"D", y: result[7].y},
        ]
    },{
        type: 'column',
        dataPoints: [
        { label:"A", y: result[8].y},
        { label:"B", y: result[9].y},
        { label:"C", y: result[10].y},
        { label:"D", y: result[11].y},
        ]
    },{
        type: 'column',
        dataPoints: [
        { label:"A", y: result[12].y},
        { label:"B", y: result[13].y},
        { label:"C", y: result[14].y},
        { label:"D", y: result[15].y},
        ]
    }
    ]


});
chart1.render();
});

});
 </script>
 </head>
 <body>
 <div id="Container" style="width: 800px; height: 380px;"></div>
 </body>
 </html>

这应该有效：

var persons = {}
json.forEach(d => {
  if (!(d.name in persons)) persons[d.name] = []
  persons[d.name].push({label: d.label, y: d.y})
})
var data = Object.keys(persons).map(name => {
  return {type: 'column', dataPoints: persons[name]}
})

首先，我们获取所有数据点并按名称对它们进行分组。然后，我们通过映射人员姓名来构建最终的数据数组。

相关文章：