charts - 使用 Google 图表 (gecharts) 为我国的省份着色

Question

我正在尝试使用 Google 图表点亮“河内”和“胡志明”，但通过修改文档中的示例无法正常工作。

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

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

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>