为什么 spurios alert() 会导致 Google Chart 正确绘制？答案

【问题标题】：Why does a spurios alert() cause Google Chart to draw correctly?为什么 spurios alert() 会导致 Google Chart 正确绘制？
【发布时间】：2015-11-07 20:41:03
【问题描述】：

我正在尝试在同一个网页上绘制两个 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();
}

解决方法是什么？

【问题讨论】：

我对谷歌图表一无所知，但我首先要查看的是在警报之前是否已加载所有内容。即，“#google-chart2”。
可能你有一些时间问题... dom 或 requests
JavaScript 位于页面底部。一切都已加载。

标签： javascript google-visualization

【解决方案1】：

绘制多个材料图表时存在问题。您可以切换到经典散点图：google.charts.Scatter -> google.visualization.ScatterChart 或延迟尝试：

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

就像这个例子： jsFiddle

【讨论】：

WhiteHat 的另一个解决方案 -> here
对于第一个建议，我收到错误 -- TypeError: google.visualization.ScatterChart is not a constructor
你需要加载google.load("visualization", "1", {packages:["corechart"]
我试过了，没用。现在我决定只删除其中一张图表。
您可以发布有关图表的完整代码或提供 jsFiddle 链接。