我正在使用canvasjs，我想将database中的数据绘制成饼图。 我能够从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
我怎么才能把它们画出来呢？ 而且，数据会增加，所以我想用这种方式来绘制。
您需要将从ARRY_KWH获得的Label和Y数据添加到某个数组，并将该数组传递给DataPoints，以便在图形中绘制值。
演示代码:
null
//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>