如何在畫布js中循環制作多個系列圖表？

我想使用Canvasjs製作多個系列圖表。我的問題是我不能在數據點內做一個循環，所以我硬編碼的一切。有沒有一種方法可以用於循環？如何在畫布js中循環制作多個系列圖表？

這裏是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>

來源

2016-02-27 Tamara Trinity

這應該工作：

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]} 
})

首先我們將所有數據點按名稱分組。然後我們通過映射人員的姓名來構建最終的數據數組。

來源

2016-02-27 10:47:11

如何在畫布js中循環制作多個系列圖表？

回答

相關問題