Как получить доступ к данным и добавить / удалить строки из диаграммы ВНЕ ОТ Call-функции? - PullRequest
Новая
       16

Как получить доступ к данным и добавить / удалить строки из диаграммы ВНЕ ОТ Call-функции?

1 голос
/ 05 апреля 2019

Я хочу использовать диаграммы 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, чтобы сделать данные глобальными переменными

Ничего не помогло.Помощь очень ценится!

1 Ответ

1 голос
/ 05 апреля 2019

определение 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>
...