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

Question

我在谷歌图表中使用 DataTable 创建了一个表。并使用表数据创建饼图。

我需要在浏览器上动态更新/修改表格数据，并需要相应地更新图表。

请告诉我如何使用谷歌图表在浏览器中使表格可编辑？

提前致谢

Answer 1

可以使用可用的 methods 之一来修改数据

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

任何时候数据发生变化，图表都必须重新绘制

在初始绘制后，请参阅以下工作片段，
数据值加倍并再次绘制...

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>