javascript - 如何使用多个谷歌图表，以便它们可以在动态表的单元格中使用

Question

我试图在表格单元格上使用多个谷歌图表，但我发现只能使用一次实例。更多信息。我正在使用此代码

...looping so I get and set percentFromtable JS value
    <tr>
  <td>
    <script type="text/javascript"     src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['percent',     percentFromtable],
          ['REst',     100 - percentFromtable],              
        ]);

        var options = {
          title: 'My Daily Activities',
          pieHole: 0.4,
        };

        var chart = new  google.visualization.PieChart(document.getElementById('donutchart'));
        chart.draw(data, options);
      }
    </script>

<div id="donutchart" style="width: 900px; height: 500px;"></div>

……

但我只得到一张图表，在其他单元格上我得到一个空白区域。也许我必须声明一组数据，但想向社区咨询正确的方法。谢谢，如果需要更多详细信息，请告知。

Answer 1

一些事情...

1. google.charts.load 和 setOnLoadCallback 每次页面加载时只能调用一次
   不能多次...
2. 每个图表 div 应该有一个唯一的 id

建议将 html 与 javascript 分开
也许尝试先构建表格，然后在页面加载时绘制图表

类似这样的事情...

google.charts.load('current', {
  callback: function () {
    var percentFromtable = 0;
    Array.prototype.forEach.call(document.getElementById('chartTable').rows, function(row, index) {
      percentFromtable += 33;
      var data = google.visualization.arrayToDataTable([
        ['Task',     'Hours per Day'],
        ['Percent',  percentFromtable],
        ['Rest',     100 - percentFromtable],
      ]);
      new google.visualization.PieChart(document.getElementById('donutchart' + index)).draw(data, {
        title: 'My Daily Activities',
        pieHole: 0.4,
      });
    });
  },
  packages:['corechart']
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<table id="chartTable">
  <tr>
    <td>
      <div id="donutchart0"></div>
    </td>
  </tr>
  <tr>
    <td>
      <div id="donutchart1"></div>
    </td>
  </tr>
  <tr>
    <td>
      <div id="donutchart2"></div>
    </td>
  </tr>
</table>