Geochart 用独特的颜色填充国家，并用颜色作为图例显示国家名称

Question

我需要用列表中指定的唯一颜色填充每个国家/地区，并显示国家/地区名称及其颜色，如 map.as 下面的图例所示 this.any 帮助图像中显示的将不胜感激。

    <html>
     <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
        google.charts.load('current', {
            'packages': ['geochart'],
            // Note: you will need to get a mapsApiKey for your project.
            // See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
            'mapsApiKey': 'AIzaSyBSJt5Ja1t7FFBGb_CZYKzFbTOCIX-nTWs&callback'
        });
        google.charts.setOnLoadCallback(drawRegionsMap);



        function drawRegionsMap() {
            var data = google.visualization.arrayToDataTable([
                ['Country', 'value'],
                ['IN', 28],
                ['US', 40],
                ['AT', 15],
                ['CA', 10],
                ['CN', 5]

            ]);

            var options = {              
                colors: ['red', 'green', 'orange', 'blue', 'yellow']


            };

            var chart = new google.visualization.GeoChart(document.getElementById('geochart-colors'));
            chart.draw(data, options);                
        };
    </script>
</head>
<body>
    <div id="geochart-colors" style="width: 700px; height: 433px;"></div>
</body>
</html>

Answer 1

为了使用 GeoChart、
为每个国家分配独特的颜色每个国家/地区都需要一个唯一值

colorAxis 允许您为特定值分配颜色，
使用 colorAxis.colors 和 colorAxis.values 选项

values 中的第一个值将分配给 colors 中的第一个颜色，
在下面的例子中，0 = 'red', 1 = 'green', 等等...

colorAxis: {
  colors: ['red', 'green', 'orange', 'blue', 'yellow'],
  values: [0, 1, 2, 3, 4]
}

为确保每个国家/地区的值都是唯一的，
将国家的值更改为行索引，
并将国家/地区的实际值设置为数据 table 单元格
的格式化值这将允许在悬停时看到该国家/地区的实际价值

for (var i = 0; i < data.getNumberOfRows(); i++) {
  var countryValue = data.getValue(i, 1);
  data.setValue(i, 1, i);
  data.setFormattedValue(i, 1, countryValue + '%');
}

您需要的颜色数量与数据中的行数相同table

至于图例，您必须手动构建，
请参阅以下工作片段...

google.charts.load('current', {
  packages: ['geochart'],
  mapsApiKey: 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Country', 'value'],
    ['IN', 28],
    ['US', 40],
    ['AT', 15],
    ['CA', 10],
    ['CN', 5]
  ]);

  for (var i = 0; i < data.getNumberOfRows(); i++) {
    var countryValue = data.getValue(i, 1);
    data.setValue(i, 1, i);
    data.setFormattedValue(i, 1, countryValue + '%');
  }

  var options = {
    colorAxis: {
      colors: ['red', 'green', 'orange', 'blue', 'yellow'],
      values: [0, 1, 2, 3, 4]
    },
    legend: 'none'
  };

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

  google.visualization.events.addListener(chart, 'ready', function () {
    var legend = document.getElementById('legend_div');
    legend.innerHTML = '';

    for (var i = 0; i < data.getNumberOfRows(); i++) {
      addLegendMarker({
        color: options.colorAxis.colors[i],
        label: data.getValue(i, 0) + ' ' + data.getFormattedValue(i, 1)
      });
    }

    function addLegendMarker(markerProps) {
      var legendMarker = document.getElementById('template-legend-marker').innerHTML;
      for (var handle in markerProps) {
        if (markerProps.hasOwnProperty(handle)) {
          legendMarker = legendMarker.replace('{{' + handle + '}}', markerProps[handle]);
        }
      }
      legend.insertAdjacentHTML('beforeEnd', legendMarker);
    }
  });

  window.addEventListener('resize', function () {
    chart.draw(data, options);
  });
  chart.draw(data, options);
});

html, body {
  height: 100%;
  margin: 0px 0px 0px 0px;
  overflow: hidden;
  padding: 0px 0px 0px 0px;
}

.chart {
  height: 100%;
}

.legend {
  bottom: 0px;
  position: absolute;
  text-align: center;
  width: 100%;
  z-index: 1000;
}

.legend-marker {
  display: inline-block;
  padding: 6px 6px 6px 6px;
}

.legend-marker-color {
  border-radius: 25%;
  display: inline-block;
  height: 16px;
  width: 16px;
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div class="legend" id="legend_div"></div>
<div class="chart" id="chart_div"></div>

<script id="template-legend-marker" type="text/html">
  <div class="legend-marker">
    <span class="legend-marker-color" style="background-color: {{color}}">&nbsp;</span>
    <span>{{label}}</span>
  </div>
</script>

Geochart 用独特的颜色填充国家，并用颜色作为图例显示国家名称

Geochart fill countries with unique colors and show country names with its color as legends

google-maps

google-maps-api-3

google-visualization

google-maps-api-2