谷歌饼图数据表值

Question

在谷歌网站上创建饼图的代码是：

google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Task', 'Hours per Day'],
      ['Work',     11],
      ['Eat',      2],
      ['Commute',  2],
      ['Watch TV', 2],
      ['Sleep',    7]
    ]);

    var options = {
      title: 'My Daily Activities'
    };

    var chart = new google.visualization.PieChart(document.getElementById('piechart'));
    chart.draw(data, options);

我有一个全局变量，我想设置它的值并将新值插入图表，例如：

    var tmp=MyGlobalVariable+10;
  google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Task', 'Hours per Day'],
      ['Work',     tmp],
      ['Eat',      3],
      ['Commute',  2],
      ['Watch TV', 2],
      ['Sleep',    7]
    ]);

每次我使用 tmp var 时，它都会从图表中消除“工作”。 如何动态设置数据表值？

Answer 1

谷歌图表库从数据集中呈现 SVG。

如果要更改 svg，则必须“重绘 (drawChart())”图表。

一个小例子（未经测试，由于时间不多，可能有问题）：

window.myChart = {
    data : [
        ['Task', 'Hours per Day'],
        ['Work', 11],
        ['Eat', 2],
        ['Commute', 2],
        ['Watch TV', 2],
        ['Sleep', 7]
    ],
    options : {
        title: 'My Daily Activities'
    },
    chart : null,
    init : function(elId) {
        this.chart = new google.visualization.PieChart(document.getElementById(elId));
        this.drawChart();
    },
    drawChart : function()
    {
        this.chart.draw(this.data, this.options);
    }
};

用法：

google.load("visualization", "1", {packages:["corechart"]});
myChart.init('my-chart-id')
google.setOnLoadCallback(myChart.drawChart);

然后每次你想改变一些数据：

mychart.data['work'] = 10;
mychart.drawChart();