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]); 
    }); 
}