Colorier les provinces de mon pays avec Google charts (geocharts)

Question

J'essaie d'éclairer "Ha Noi" et "Ho Chi Minh" à l'aide de Google Charts mais cela ne fonctionne pas en modifiant l'exemple dans le document.

      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/

Je me demande s'il est possible de colorier les provinces/états en dehors des États-Unis.

Answer 1

Essayez d'utiliser le ISO 3166-2:VN codes

voir l'extrait de travail suivant...

également, le colorAxis prendra par défaut les valeurs min et max des données.

laisser la valeur min transparente lorsqu'il n'y a que deux lignes

set spécifique colorAxis.min / colorAxis.max à éviter...

      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>