如何使用多個谷歌圖表，以便他們可以在動態表格的單元格中使用

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與分開
也許嘗試先建立好表，然後繪製圖表時頁面加載

這樣的事情...

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>