如何在谷歌圖表中動態編輯表格？

Question

我在谷歌圖表中使用DataTable創建了一個表格。 並使用表格數據創建餅圖。

我需要在瀏覽器上動態更新/修改表數據，並需要相應地更新圖表。

請告訴我如何使用谷歌圖表在瀏覽器中編輯表格？

提前致謝

Answer 1

可以使用其中一種可用方法修改數據

比如setValue
data.setValue(rowIndex, columnIndex, newValue);

無論何時更改data都必須重新繪制chart

在初始抽獎后，請參閱以下工作片段，
數據值加倍並再次繪制......

 google.charts.load('current', { callback: function () { var container = document.getElementById('chart_div'); var chart = new google.visualization.PieChart(container); var data = google.visualization.arrayToDataTable([ ['Task', 'Hours'], ['A', 2], ['B', 4], ['C', 6], ['D', 8], ['E', 10], ['F', 12], ['G', 14] ]); var options = { height: 400, chartArea: { top: 24 }, legend: 'top', pieHole: 0.4, pieSliceText: 'value', width: 400 }; google.visualization.events.addOneTimeListener(chart, 'ready', function () { // edit data for (var i = 0; i < data.getNumberOfRows(); i++) { // double values data.setValue(i, 1, data.getValue(i, 1) * 2); } chart.draw(data, options); }); chart.draw(data, options); }, packages: ['corechart'] }); 

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