使用Google图表库制作未显示的GeoChart

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定义中的extra = ，在这里...
<div=id='regions_div' style="width: 600px; height: 500px;"></div>

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

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

另外，请确保同时加载两个库loader.js和jsapi

以下是有效的代码段...

 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'] }); 

 <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>