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() code> 首先启动，因为报错:

Uncaught TypeError: Cannot call method 'addRow' of undefined

修复此问题的一个选项是在 drawChart() 函数末尾调用 changeData();。

下一个:调用

data.addRow(10, 10);

必须更改为:

data.addRow([2006, 10]);

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

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

参见example at jsbin .