通过动态数据绘制Google饼图

问题描述 投票:0回答:1

我正在尝试通过使用JavaScript创建动态表来绘制简单的Google饼图。

为什么我的代码失败?

var g;
for (g=0; g <3; g++) {      
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Task');
    data.addColumn('number', 'Failed');
    data.addColumn('number', 'Passed');
    data.addRows(1);
    data.setCell(0, 0, "Work?");
    data.setCell(0, 1, 80);
    data.setCell(0, 2, 20);
    var chartName = 'piechart'+(g+1);  
    var chart = new google.visualization.PieChart(document.getElementById(chartName));   
    chart.draw(data,options);
}

在我的屏幕上绘制了3个饼图,但是它们都只有一种颜色和一个切片,而不是像我的代码中那样20%80%。

而且,我的控制台上没有任何错误。

javascript google-visualization
1个回答
0
投票

您的目标是这样吗?另外,如果可以的话,请考虑使用addRows代替setCell

我认为问题在于您的表/数据结构。

<script src="https://www.gstatic.com/charts/loader.js"></script>

<div id="piechart1"></div>
<div id="piechart2"></div>
<div id="piechart3"></div>

<script>
  // Load the Visualization API and the corechart package.
  google.charts.load('current', {
    'packages': ['corechart']
  });

  // Set a callback to run when the Google Visualization API is loaded.
  google.charts.setOnLoadCallback(drawChart);

  function drawChart() {
    var g;
    for (g = 0; g < 3; g++) {
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'PassOrfail');
      data.addColumn('number', 'Percentage');

      data.addRows([
      ['Passed', 80],
      ['Failed', 20],
      ]);
      var chartName = 'piechart' + (g + 1);
      var chart = new google.visualization.PieChart(document.getElementById(chartName));
      chart.draw(data);
    }
  }
</script>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.