使用canvasjs中的数据库在饼图上绘制数据答案

【问题标题】：Plot data on pie chart using database in canvasjs使用canvasjs中的数据库在饼图上绘制数据
【发布时间】：2020-06-27 09:57:41
【问题描述】：

我正在使用canvasjs 我想将database 中的数据绘制成饼图。我能够从DB 获取数据并将其传递给数组。

array_push($dataPointskWh, array("label"=>$pr['name'],"y"=>$cr['sum_kwh_diff']));

<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

如何绘制它们？此外，数据会增加，所以我想以这种方式绘制。

【问题讨论】：

嗨，你试过下面的答案吗？这对你有用吗？

标签： javascript php jquery canvasjs

【解决方案1】：

您需要将从arry_kwh 获得的label 和y 数据添加到某个数组，并将此数组传递给您的dataPoints 以在图中绘制值。

演示代码：

//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>

【讨论】：