GeoChart地图太长,无法加载

时间:2017-02-20 09:08:07

标签: javascript html charts google-visualization

我在使用GeoCode时遇到了一些问题:我的地图会超过30秒显示所有区域。事实上,我希望每个国家都用我的语言翻译(法语),所以我直接用他们的法语名称命名这些国家,并且它运作良好,API正确地检测所有国家。但问题是国家检测似乎需要花费大量时间来处理大量数据。

我可以向你展示一个具有完全相同问题的codepen例子:https://codepen.io/ocariceo/pen/vywoLN(唯一的区别是西班牙语)。

var data = google.visualization.arrayToDataTable([
      ['', 'Inmigrantes'],
      ['Alemania', 4665],
      ['Estados Unidos', 25605],
      ['Brasil', 13951],
      ['Canada', 2613],
      ['Francia', 6190]
]);

当我查看Chrome开发者工具时>网络,它告诉我图表完成后29秒显示所有国家......:/

是否有机会定义每个国家/地区的ISO代码(或英文名称)+显示法语名称?

提前感谢您的回答!

1 个答案:

答案 0 :(得分:2)

使用对象表示法提供英语或ISO值(v:)以加快加载速度,
以及用于显示法语名称的格式化值(f:),例如,

    [{v: 'United States', f: 'Estados Unidos'}, 25605],

- 或 -

    [{v: 'US', f: 'Estados Unidos'}, 25605],

请参阅以下工作代码段...



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

function drawRegionsMap() {
  var data = google.visualization.arrayToDataTable([
    ['', 'Inmigrantes'],
    [{v: 'Germany', f: 'Alemania'}, 4665],
    [{v: 'United States', f: 'Estados Unidos'}, 25605],
    [{v: 'Brazil', f: 'Brasil'}, 13951],
    [{v: 'Canada', f: 'Canada'}, 2613],
    [{v: 'France', f: 'Francia'}, 6190]
  ]);

  var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
  chart.draw(data);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
&#13;
&#13;
&#13;