Question

大家。我有个问题。我正在制作一个网页，我想在其中加入一个GeoChart。问题是，即使我直接从Google开发人员的网站上复制粘贴并将代码合并到预先存在的网站中，地图也不会显示。我不知道我做错了什么。

这是JavaScript部分： -

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

        function drawRegionsMap()
        {
            var data = google.visualization.arrayToDataTable([
            ['Country', 'Popularity'],
            ['Germany', 200],
            ['United States', 300],
            ['Brazil', 400],
            ['Canada', 500],
            ['France', 600],
            ['RU', 700]
            ]);

            var options = {};

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

            chart.draw(data, options);
        }
</script>

这是HTML部分： -

<div=id='regions_div' style="width: 600px; height: 500px;"></div>

Answer 1

看起来主要问题是=定义中的额外div，这里......
<div=id='regions_div' style="width: 600px; height: 500px;"></div>

因此，图表无法找到在浏览器控制台中报告的容器。

更改为...
<div id='regions_div' style="width: 600px; height: 500px;"></div>

另外，请务必加载两个库 - loader.js＆amp; jsapi

以下是一个工作片段......

＆＃13;

google.charts.load('current', {
  callback: function () {
    var data = google.visualization.arrayToDataTable([
      ['Country', 'Popularity'],
      ['Germany', 200],
      ['United States', 300],
      ['Brazil', 400],
      ['Canada', 500],
      ['France', 600],
      ['RU', 700]
    ]);

    var options = {};
    var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));
    chart.draw(data, options);
  },
  packages:['geochart']
});

＆＃13;

<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://www.google.com/jsapi"></script>
<div id='regions_div' style="width: 600px; height: 500px;"></div>

＆＃13;

使用Google Charting库制作未显示的GeoChart

1 个答案: