为什么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图表正确绘制？

回答

相关问题