爲什麼spurios alert（）會導致Google圖表正確繪製？

我想在同一個網頁上繪製兩個谷歌圖表。爲什麼spurios alert（）會導致Google圖表正確繪製？

的第二圖表的代碼看起來像這樣

function chart2() { 
    /* second chart (scatter plot) */ 
    var data2 = new google.visualization.DataTable(); 
    data2.addColumn('number', 'Date'); 
    data2.addColumn('number', 'Sold Price'); 

    var map = /*[[${worthTemplateData.pricingInfo['marketHistory']}]]*/ []; 
    map.forEach(function (item) { 
    data2.addRows([ [item.date, item.origPrice] ]); 
    }); 

    alert('Please wait'); 

    var options = { 
    width: 900, 
    height: 500, 
    chart: { 
    title: 'Price History', 
    subtitle: 'For similar-size units' 
    }, 
    hAxis: {title: 'Date'}, 
    vAxis: {title: 'Sold Price'} 
    }; 

    var chart2 = new google.charts.Scatter(document.getElementById('google-chart2')); 
    chart2.draw(data2, google.charts.Scatter.convertOptions(options)); 
}

它的工作原理。

但是，只要我刪除alert('Please wait');行，它不再工作了！圖表所在的屏幕區域爲空。

我懷疑有一些時間問題，即使JS大概是「單線程」。

更重要的是令人費解的，如果我更改順序，只有其他圖表負載：

google.load("visualization", "1.0", {packages: ["bar", "scatter"]}); 
google.setOnLoadCallback(drawCharts); 

function drawCharts() { 
     chart2(); 
     chart1(); 
}

有什麼解決？

來源

2015-11-07 Alex R

我不知道谷歌圖表任何東西，但首位我會開始看看是否在該警報之前加載了所有內容。即，「＃google-chart2」。 –

可能你有一些時間問題... dom或請求 – albanx

JavaScript是在頁面的底部。一切已經加載。 –

繪製多個材質圖表存在問題。你可以切換到經典散點圖：google.charts.Scatter - >google.visualization.ScatterChart或延遲一些嘗試：

function doSetTimeOutDrawChart(chart, data, options, delay){ 
    setTimeout(function() { 
     chart.draw(data, options); 
    }, delay); 
}

就像這個例子： jsFiddle

來源

2015-11-07 23:05:34

[WhiteHat]（http://stackoverflow.com/users/5090771/whitehat） - > [這裏]的另一個解決方案（http://stackoverflow.com/questions/32884121/google-charts-drawing-multiple-bar-圖表與雙軸在ie/32907208＃32907208） –

第一個建議，我得到了錯誤 - TypeError：google.visualization.ScatterChart不是構造函數 –

您需要加載 'google.load（「visualization 「，」1「，{packages：[」corechart「]' –

爲什麼spurios alert（）會導致Google圖表正確繪製？

回答

相關問題