Javascript Google Charts 更改数据

Question

我正在尝试创建一个函数来更改 Google Charts 散点图中的数据，但是当我调用该函数时，图表并没有改变。代码如下：

<script type="text/javascript">

var years = [2001, 2002, 2003, 2004, 2005];
var sales = [1, 2, 3, 4, 5];

google.load("visualization", "1", {packages:["corechart"]});

 google.setOnLoadCallback(drawChart);

  var data;
  var options;
  var chart;

  function drawChart() {
        data = new google.visualization.DataTable();
  data.addColumn('number', 'years');
  data.addColumn('number', 'sales');

  for(i = 0; i < years.length; i++)
    data.addRow([years[i], sales[i]]);

        options = {
          title: 'Age vs. Weight comparison',
          hAxis: {title: 'Age', minValue: 0, maxValue: 1},
          vAxis: {title: 'Weight', minValue: 0, maxValue: 1},
          legend: 'none'
        };

        chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));

        chart.draw(data, options);
      }

    $(document).ready(function(){
         changeData();
    });

     function changeData()
     {
        data.addRow(10, 10);
        chart.draw(data, options); 
     }   
</script>

Answer 1

代码中有一些错误。

第一个：你正在调用负载google.setOnLoadCallback(drawChart);和changeData(); 看来changeData()是先启动的，因为报错了：

Uncaught TypeError: Cannot call method 'addRow' of undefined

修复它的一种方法是在drawChart() 函数的末尾调用changeData();。

下一个：调用

data.addRow(10, 10);

必须改为：

data.addRow([2006, 10]);

因为addRow() 需要一个数组。

必须更改最小值和最大值。

见example at jsbin。