我希望构建数量不确定的饼图,并能够将它们彼此并排显示在页面上。生成的饼图的数量将取决于JSON对象中元素的数量。我在下面提供了一个有关数据外观的示例:
[
{
"id" : "123",
"data" : [20, 40, 10, 20, 10]
},
{
"id" : "456",
"data" : [10, 20, 20, 30, 20]
},
{
"id" : "789",
"data" : [25, 35, 5, 10, 25]
}
]
我想为每个具有“ id”和“ data”属性的元素制作一个饼图。“数据”将用作饼图中“ id”(包含在元素中)的dataPoints。我该如何实现?
从JSON解析数据并将其传递到chart-options即可。查找下面的代码:
var dps = [];
var dataSeries = [];
var charts = [];
$.when( $.getJSON("https://api.myjson.com/bins/us9mk", function(result) {
for(var i = 0; i < result.length; i++) {
dps = [];
for(var j = 0; j < result[i].data.length; j++) {
dps.push({y: result[i].data[j]});
}
dataSeries.push({id: result[i].id, type: "pie", dataPoints: dps})
}
})).then(function( data, textStatus, jqXHR ) {
for(var i = 0; i < dataSeries.length; i++) {
$("#chartsContainer").append("<div id='" + dataSeries[i].id + "' style='width: 100%; height: 200px;'></div>");
charts[i] = new CanvasJS.Chart(dataSeries[i].id, {
title: {
text: dataSeries[i].id
},
data: [dataSeries[i]]
});
charts[i].render();
}
});
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="chartsContainer"></div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句