JavaScript Google Visualization API 多个图表数据显示在错误的图表中

Question

因此，我正在使用 HTML 构建一个基本的仪表板，并使用 Google 的可视化 API 来实现此目的。我需要创建许多图表，下面的代码可以很好地实现这一点。除了一个问题:数据本身似乎是随机归因于图表的。每次我重新加载页面时，图表都会切换它们显示的数据。

我试图通过创建一个 dataArray 以及其他数组来解决这个问题，但这并没有解决问题 - 必须有某种方法可以将数据直接归因于查询中的图表。谢谢!

<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">

  // Load the Visualization API and the piechart package.
  google.charts.load('current', {packages: ['corechart']});

  // Set a callback to run when the Google Visualization API is loaded
  google.charts.setOnLoadCallback(function() {
    drawChart('chart1', 0, 'SELECT A, B, C, D, E, G OFFSET 1', 'Sheet1',
      { title: 'Chart 1'}
    )

    drawChart('chart2', 1, 'SELECT A, I OFFSET 1', 'Sheet1',
      { title: 'Chart 2' }
    )
  });

  var chartsArray = [];
  var optionsArray = [];
  var nextID = 0;

  function drawChart(tag, id, sqlCommand, sheetName='Sheet1',  options= {}, numHeaders=1) {

    chartsArray[id] = new google.visualization.LineChart(document.getElementById(tag));

    optionsArray[id] = options;

    var queryString = encodeURIComponent(sqlCommand);

    var query = new google.visualization.Query(
       'https://docs.google.com/spreadsheets/d/1L8jhM7FHOg86hZMIJB2L_032-JbGKzX4ht6r3mxvP0gA/gviz/tq?sheet=' + sheetName + '&headers=' + numHeaders.toString() + '&tq=' + queryString);
      query.send(handleDataQueryResponse);
  }

  function handleDataQueryResponse(response, id) {
    if (response.isError()) {
      alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
      return;
    }

    data = response.getDataTable();
    chartsArray[nextID].draw(data, optionsArray[nextID]);
    nextID += 1;
  }

<小时/>

<div id="chart1" class="chart"></div>
<div id="chart2" class="chart"></div>

更新:我已经通过调用 setTimeout() 解决了这个问题(目前是可怕的解决方案)，从而强制对可视化 API 的调用按照我希望的顺序执行。

Answer 1

回调函数，handleDataQueryResponse是异步调用的，所以你不能保证一个函数会在另一个函数之前完成...

推荐这样的东西......

function drawChart(tag, id, sqlCommand, sheetName='Sheet1',  options= {}, numHeaders=1) {

  chartsArray[id] = new google.visualization.LineChart(document.getElementById(tag));

  optionsArray[id] = options;

  var queryString = encodeURIComponent(sqlCommand);

  var query = new google.visualization.Query(
     'https://docs.google.com/spreadsheets/d/1L8jhM7FHOg86hZMIJB2L_032-JbGKzX4ht6r3mxvP0gA/gviz/tq?sheet=' + sheetName + '&headers=' + numHeaders.toString() + '&tq=' + queryString);
  query.send(function (response) {
    if (response.isError()) {
      alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
      return;
    }

    data = response.getDataTable();
    chartsArray[id].draw(data, optionsArray[id]);
  });
}