javascript - 如何向 Javascript 饼图添加数据

Question

我试图在饼图中显示每个主人的宠物百分比，如何将数据推送到饼图？ for 循环不断收到 SyntaxError: Unexpected token var。这是我的代码。

window.onload = function() {
var count = "<?php echo($i)?>";
var name = [];
var per = [];
var j = -1;

var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
title: {
    text: "TB_PET"
},
data: [{
    type: "pie",
    startAngle: 240,
    yValueFormatString: "##0.00\"%\"",
    indexLabel: "{label} {y}",

Error here-->for(var i = 0; i < count; i++){
 name[i] = document.getElementById(i).value;
 per[j] = document.getElementById(j).value;

dataPoints: [
{y: per[j], label: name[i]}
]

  j--;
  }

  }]
  });
  chart.render();

  }

Answer 1

您无法在作为参数传递给函数调用的对象文字(图表的配置)内部进行迭代。

在 new CanvasJS.Chart(...) 调用之前迭代数据，并将变量作为配置对象的一部分传递。

在此处迭代

var dataPoints = []; 
for(...){
  dataPoints.push(..);
]

然后按如下方式传递数据点

var chart = new CanvasJS.Chart("chartContainer", {
  animationEnabled: true,
  title: {
    text: "TB_PET"
  },
  data: [
    {
      type: "pie",
      startAngle: 240,
      yValueFormatString: '##0.00"%"',
      indexLabel: "{label} {y}",
      dataPoints: dataPoints

    }
  ]
});
chart.render();