如何在谷歌图表中动态编辑表格？

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>