自定义Google GeoChart颜色映射 求助实现点击区域变色功能

嘿，我刚好折腾过GeoChart的这两个功能，给你梳理下具体实现步骤，应该能帮到你！

一、自定义颜色映射 #

GeoChart提供了两种实用的自定义颜色方式，你可以根据需求选择：

1. 基于数据值的渐变/分段颜色 #

如果你的图表是根据数据值区分颜色，可以用colorAxis配置项定义颜色范围或分段：

var options = {
  colorAxis: {
    colors: ['#e7711c', '#4374e0'], // 从橙色到蓝色的渐变
    minValue: 0,
    maxValue: 100
  },
  // 其他配置...
};

要是需要分段固定颜色（比如0-30绿色、31-70黄色、71-100红色），可以加values属性：

colorAxis: {
  colors: ['#2ecc71', '#f1c40f', '#e74c3c'],
  values: [0, 30, 70, 100]
}

2. 特定区域固定自定义颜色 #

如果要给指定国家/区域单独设置颜色，需要在DataTable里添加样式列（类型为'string'，角色为'style'），然后给对应行设置颜色值：

// 构造DataTable，最后一列是样式列
var data = google.visualization.arrayToDataTable([
  ['Country', 'Value', { role: 'style' }],
  ['Germany', 50, '#ff0000'], // 德国设为红色
  ['France', 30, '#00ff00'], // 法国设为绿色
  ['Spain', 70, '#0000ff'], // 西班牙设为蓝色
  // 其他区域...
]);

二、点击区域后变色 #

要实现点击区域变色，需要监听GeoChart的select事件，获取选中区域后更新样式并重新渲染：

关键步骤： #

1. 初始化时保存所有区域的原始颜色，方便后续恢复
2. 监听select事件，获取选中行的索引
3. 把选中行的样式改为高亮色，其他行恢复原始颜色
4. 调用chart.draw()重新绘制图表

完整代码示例 #

<!DOCTYPE html>
<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']});
    google.charts.setOnLoadCallback(drawRegionsMap);

    function drawRegionsMap() {
      // 构造带样式列的原始数据
      var rawData = [
        ['Country', 'Popularity', { role: 'style' }],
        ['Germany', 65, '#e7711c'],
        ['United States', 80, '#4374e0'],
        ['Brazil', 70, '#f1c40f'],
        ['Canada', 60, '#2ecc71'],
        ['France', 50, '#9b59b6'],
        ['RU', 90, '#e67e22']
      ];
      var data = google.visualization.arrayToDataTable(rawData);
      // 保存原始颜色数组，用于点击后恢复
      var originalColors = rawData.map(row => row[2]);

      var options = {
        legend: 'none'
      };

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

      // 绑定点击事件
      google.visualization.events.addListener(chart, 'select', function() {
        var selection = chart.getSelection();
        if (selection.length > 0) {
          var selectedRow = selection[0].row;
          // 遍历所有行，更新样式列
          for (var i = 0; i < data.getNumberOfRows(); i++) {
            data.setValue(i, 2, i === selectedRow ? '#ff0000' : originalColors[i]);
          }
          // 重新渲染图表
          chart.draw(data, options);
        } else {
          // 点击空白区域时，恢复所有区域的原始颜色
          for (var i = 0; i < data.getNumberOfRows(); i++) {
            data.setValue(i, 2, originalColors[i]);
          }
          chart.draw(data, options);
        }
      });

      chart.draw(data, options);
    }
  </script>
</head>
<body>
  <div id="regions_div" style="width: 900px; height: 500px;"></div>
</body>
</html>

注意点： #

• 必须确保DataTable包含style角色的列，否则无法单独设置区域颜色
• 如果没有初始自定义颜色，原始颜色可以设为图表默认色或统一基础色
• 点击空白区域时，getSelection()返回空数组，这里加了恢复所有颜色的逻辑，你可以根据需求调整

内容的提问来源于stack exchange，提问作者wDrik