Question

我试图照亮＆＃34; Ha Noi＆＃34;和＃34;胡志明＆＃34;使用谷歌图表，但它没有通过修改文档中的示例工作。

＆＃13;

      google.charts.load('upcoming', {'packages':['geochart']});
      google.charts.setOnLoadCallback(drawRegionsMap);

      function drawRegionsMap() {

        var data = google.visualization.arrayToDataTable([
          ['Provinces', 'Popularity'],
          ['Hanoi', 200],
          ['HCM', 300],
        ]);

        var options = {region:'VN',resolution:'provinces'};

        var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));

        chart.draw(data, options);
      }

＆＃13;

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

＆＃13;

https://jsfiddle.net/na8hvgts/

我想知道是否有可能对美国以外的省/州进行着色。谢谢。

Answer 1

尝试使用ISO 3166-2:VN codes

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

此外，colorAxis将默认为数据中的最小值和最大值

当只有两行时，将最小值保持透明

设置具体的colorAxis.min / colorAxis.max以避免......

      google.charts.load('upcoming', {'packages':['geochart']});
      google.charts.setOnLoadCallback(drawRegionsMap);

      function drawRegionsMap() {

        var data = google.visualization.arrayToDataTable([
          ['Provinces', 'Popularity'],
          [{v: 'VN-HN', f: 'Hanoi'}, 200],
          [{v: 'VN-SG', f: 'HCM'}, 300],
        ]);

        var options = {
          region:'VN',
          resolution:'provinces',
          colorAxis: {
            minValue: 0,
            maxValue: 400
          }
        };

        var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));

        chart.draw(data, options);
      }

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

使用Google图表（地理位置）在我的国家/地区着色省份

1 个答案: