[英]Plot data on pie chart using database in canvasjs
我正在使用canvasjs
我想将database
中的 plot 数据转换为饼图。 我能够从DB
中获取数据并将其传递给数组。
array_push($dataPointskWh, array("label"=>$pr['name'],"y"=>$cr['sum_kwh_diff']));
JS
<script>
var arry_kwh = [];
arry_kwh = <?php echo json_encode($dataPointskWh, JSON_NUMERIC_CHECK); ?>;
console.log(arry_kwh);
var chart = new CanvasJS.Chart("chartContainer2", {
animationEnabled: true,
title: {
text: "Last Month Floor Wise kWh"
},
data: [{
type: "pie",
//startAngle: 240,
//showInLegend: true,
yValueFormatString: "##0.00\" kWh\"",
indexLabel: "{label} {y}",
dataPoints: [
// here I want to add the data points
]
}]
});
chart.render();
console.log(array_kwh)
给了我
0:
label: "Floor-1"
y: 1297
1:
label: "Floor-2"
y: 7.7
我怎样才能 plot 他们? 此外,数据会增加,所以我想以这种方式 plot 。
您需要将从arry_kwh
获得的label
和y
数据添加到某个数组,并将该数组传递给您的dataPoints
到 plot 图中的值。
演示代码:
//your data var arry_kwh =[{ "label": "Floor-1", "y": 1297 },{ "label": "Floor-2", "y": 780}]; var dataPoints =[]; //loop through the array and add value to dataPoints array $.each(arry_kwh, function(key, value){ dataPoints.push({ y:value.y, indexLabel: value.label}); }); var chart = new CanvasJS.Chart("chartContainer2", { animationEnabled: true, title: { text: "Last Month Floor Wise kWh" }, data: [{ type: "pie", yValueFormatString: "##0.00\" kWh\"", dataPoints:dataPoints //passing values }] }); chart.render();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script> <div id="chartContainer2" style="height: 300px; width: 100%;"></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.