Question

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

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

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

提前致谢

Answer 1

可以使用其中一个可用的methods

修改数据

例如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>

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

1 个答案: