Google 未为 setOnLoadCallback 定义可视化

Question

我正在使用 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 是全局定义的。脚本包含行出现在 header 中。问题是，有时我会收到一条错误消息：

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 中测试）。

有人可以指点一下如何避免出现此错误吗？

Answer 1

我通常会等待 load 事件，然后再加载 google。
您还可以在 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>

Answer 2

请注意 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>

Answer 3

在 off-chance 中，有人遇到了与我相同的问题：使用 setTimeout()

构建一个小延迟

由于某些原因，当我结合 loader.js VueJS 时，回调函数没有完成它的工作。经过一些挖掘和构建延迟 - VOILA！地图 :)

Answer 4

这是我的解决方法：
在头部添加 <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>

Google 未为 setOnLoadCallback 定义可视化

Google visualization undefined for setOnLoadCallback

javascript

charts

undefined

google-visualization