Question

我想使用Google图表并将以下代码添加到页面上

google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawLines); 

function drawLines() {
  data = new google.visualization.DataTable();
  ...
}

该图表的构建符合预期，但是当在回调函数drawlines（）之外时，我无法找到如何添加或删除行

我尝试以不同的方式定义变量数据：

在顶层：

var data;         // gives me "data is not a function" when used after the callback

google.charts.load('current', {packages: ['corechart', 'line']});
data = new google.visualization.DataTable(); // also gives me "data is not a function"

回调代码后

var data = new google.visualization.LineChart(document.getElementById('chart_div'));
data.addRow([30,100,95]);

在回调中 我删除了关键字var以使数据成为全局变量

没有任何效果。非常感谢您的帮助！

Answer 1

全局定义data，chart和options应该可以正常工作。

请确保在触发回调之前不要使用它们。

请参阅以下工作片段，
单击更新图表按钮以查看其工作原理。

google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawLines);

var data;
var options;
var chart;

function drawLines() {
  data = new google.visualization.DataTable();
  data.addColumn('number', 'x');
  data.addColumn('number', 'y0')
  data.addColumn('number', 'y1')
  data.addRows([
    [0, 10, 30],
    [1, 11, 31],
    [2, 12, 32],
    [3, 13, 33],
    [4, 14, 34]
  ]);

  options = {
    title: 'Test Update'
  };

  chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  chart.draw(data, options);

  document.getElementById('update-chart').addEventListener('click', updateChart);
}

function updateChart() {
  var rangeY0 = data.getColumnRange(1);
  var rangeY1 = data.getColumnRange(2);

  data.addRow([
    data.getNumberOfRows(),
    rangeY0.max + 1,
    rangeY1.max + 1
  ]);

  chart.draw(data, options);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<input id="update-chart" type="button" value="Update Chart" />
<div id="chart_div"></div>

如何在回调函数之外访问数据表并从图表中添加/删除行？

1 个答案: