未定义 setOnLoadCallback 的 Google 可视化答案

【问题标题】：Google visualization undefined for setOnLoadCallback未定义 setOnLoadCallback 的 Google 可视化
【发布时间】：2016-02-01 01:34:31
【问题描述】：

我正在使用 Google Geocharts 并按照 Google 的文档 (https://developers.google.com/chart/interactive/docs/gallery/geochart?hl=en) 来设置这样的图表：

google.charts.load('current', {'packages':['geochart']});
google.setOnLoadCallback(drawRegionsMap);

function drawRegionsMap() {

 ...
  var data = google.visualization.arrayToDataTable(a1);
  var options = {};

  var chart = new google.visualization.GeoChart(document.getElementById('div_geochart'));

  chart.draw(data, options);
};

array a1 是全局定义的。脚本包含行出现在标题中。问题是，有时，我收到一条错误消息：

Uncaught TypeError: Cannot read property 'arrayToDataTable' of undefined

并且图表没有加载。真正的问题是很难查明问题，因为它并不总是发生。似乎有时 google.visualization 尚未设置？但是，使用 setOnLoadCallback 调用 drawRegionsMap 的重点不就是在成功设置 google.visualization 后调用它吗？

我确实尝试过更改 setOnLoadCallback 行的位置，如下所述：Google Visualization - TypeError: Cannot read property 'DataTable' of undefined [Chrome specific]。我还将这两行放在页面的<head> 部分，但有时仍然会出现错误（在 Chrome 和 IE 中测试）。

有人可以告诉我如何避免出现此错误吗？

【问题讨论】：

没有。这是唯一调用 drawRegionsMap 的地方。这里仅此而已。 'a1' 被简单地定义为 javacript 起始块顶部的数组：var a1 = [['Countries', 'Popularity'], ['US', '1']];

标签： javascript charts google-visualization undefined

【解决方案1】：

请注意，google.setOnLoadCallback 与 google.charts.setOnLoadCallback 不同。如果您使用 google.charts.load()，您还需要使用 google.charts.setOnLoadCallback()。他们一起去。

此外，由于您使用的是 GeoChart，您可能还需要加载 jsapi 加载器，该加载器用于通过 Google 地图加载地理编码数据。但是，对于最新版本，这不再适用，但如果您使用的是旧版本，仍然适用。所以你的文档应该是这样的：

    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['geochart']});
      google.charts.setOnLoadCallback(drawSomeGeoChart);
      function drawSomeGeoChart() {
         ...
      }
    </script>

【讨论】：

我不明白为什么这是相关的。是的，我包括了我提到的 jsapi 加载程序，并且我使用的是 google.seOnLoadCallback，而不是另一个（如我引用的 google 文档中所示）
Sujay，这很重要，因为您使用的是 google.charts.load 而不是 google.load。如果您使用的是 google.load，您应该使用 google.setOnLoadCallback。但是，在您的示例中，您使用的是 google.charts.load，因此您应该使用 google.charts.setOnLoadCallback。
文档现在确实说要使用 google.charts.setOnLoadCallback()。并且你如何调用你的函数来绘制图表是非常相关的，因为如果你没有正确地做它就不会可靠地工作。请注意，如果定义了 google.setOnLoadCallback（因为您也需要为 GeoChart 加载 jsapi 加载器，它将定义 google.setOnLoadCallback），那么您的回调将在任何时候被调用google.load() 加载的其他包已完成。也许您更愿意在 google.charts.load() 调用中使用“回调”属性。
@SergeyG 和 dlaliberte，是的，你是对的，我的错。我把它们混在一起了。我将在这两个地方使用google.charts.function() 并报告。
@SergeyG 和 dlaliberte 谢谢。我根据您的指示更改了线路，似乎不再出现间歇性负载问题。干杯。

【解决方案2】：

我通常在加载 google 之前等待 load 事件。
您还可以在google.charts.load 语句中定义callback 函数。

var a1 = [
  ['Country', 'Popularity'],
  ['Germany', 200],
  ['United States', 300],
  ['Brazil', 400],
  ['Canada', 500],
  ['France', 600],
  ['RU', 700]
];

// wait for page to load
window.addEventListener('load', loadGoogle, false);

function loadGoogle() {
  // define callback in load statement
  google.charts.load('current', {'packages':['geochart'], 'callback': drawRegionsMap});
}

function drawRegionsMap() {
  var data = google.visualization.arrayToDataTable(a1);
  var options = {};
  var chart = new google.visualization.GeoChart(document.getElementById('div_geochart'));
  chart.draw(data, options);
};

<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://www.google.com/jsapi"></script>
<div id="div_geochart"></div>

【讨论】：

有时，我看到加载 Google 的时间比它应该的要长，但如果你等待 DOM 加载，应该不会有问题...
这与 setOnLoadCallback 有何不同？ setOnLoadCallback 的实现不应该这样做吗？这就是文档所说的：developers.google.com/feed/v1/devguide?hl=en（向下滚动到“调用 onLoad 处理程序”部分）
这里也报告了 setOnLoadCallback 的零星计时问题github.com/google/google-visualization-issues/issues/1690。我还没有真正找到任何真正的解决方法。
虽然不应该有什么不同，但dynamic loading，我负责当事情发生时......
结构非常好！

【解决方案3】：

如果有人遇到与我相同的问题：使用setTimeout() 构建一个小的延迟

由于某种原因，当我结合 loader.js VueJS 时，回调函数没有发挥作用。在延迟了一些挖掘和建造之后 - 瞧！一张地图:)

【讨论】：

【解决方案4】：

这是我的解决方法：
在head部分添加<script>标签并使用“defer”。

<head>
  <script defer async=false src="https://www.google.com/jsapi"></script>
  <script defer  src="https://www.gstatic.com/charts/loader.js"></script>
</head>

【讨论】：