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