如何实现Google GeoChart国家可点击并保持选中变色效果？

嘿，这个需求我之前做过！要让Google GeoChart支持点击国家变色、保留选中状态还能多选，核心就是靠监听图表的选择事件，自己维护一个选中状态集合，然后动态更新图表的颜色配置就行。下面给你完整的可运行代码，再拆解下关键部分：

完整可运行代码 #

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

<script type="text/javascript">
google.charts.load('current', {
  'packages':['geochart'],
  // 注：如果需要更精细的地图数据或更高请求量，建议添加你的Google Maps API密钥
  // 'mapsApiKey': 'YOUR_API_KEY'
});
google.charts.setOnLoadCallback(drawRegionsMap);

// 存储选中国家的状态：键为国家名称，值为布尔值表示是否选中
let selectedCountries = {};

function drawRegionsMap() {
  // 示例数据，可替换为你自己的业务数据
  var data = google.visualization.arrayToDataTable([
    ['Country', 'Metric'],
    ['Germany', 200],
    ['United States', 300],
    ['Brazil', 400],
    ['Canada', 500],
    ['France', 600],
    ['Russia', 700],
    ['China', 800]
  ]);

  var baseOptions = {
    colorAxis: {colors: ['#e0f3ff', '#ff4d4d']}, // 默认未选中/选中颜色
    enableRegionInteractivity: true, // 开启区域交互
    tooltip: {trigger: 'selection'}, // 仅选中时显示 tooltip
    legend: 'none'
  };

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

  // 监听图表选择事件
  google.visualization.events.addListener(chart, 'select', () => {
    handleCountrySelection(chart, data, baseOptions);
  });

  // 初始绘制图表
  chart.draw(data, baseOptions);
}

function handleCountrySelection(chart, data, baseOptions) {
  const selection = chart.getSelection();
  if (selection.length === 0) return; // 无选中内容则退出

  // 获取当前点击的国家名称
  const selectedCountry = data.getValue(selection[0].row, 0);
  
  // 切换该国家的选中状态
  selectedCountries[selectedCountry] = !selectedCountries[selectedCountry];

  // 重新绘制图表，应用最新选中状态的颜色
  chart.draw(data, {
    ...baseOptions,
    // 自定义每行数据的颜色：根据选中状态返回对应色值
    series: {
      0: {
        color: (rowIndex) => {
          const country = data.getValue(rowIndex, 0);
          return selectedCountries[country] ? '#ff4d4d' : '#e0f3ff';
        }
      }
    }
  });
}
</script>

关键逻辑拆解 #

• 选中状态存储：用selectedCountries对象记录每个国家的选中状态，确保切换操作准确且状态可持久保留。
• 选择事件监听：通过google.visualization.events.addListener绑定图表的select事件，每次用户点击国家时触发状态更新逻辑。
• 动态颜色配置：重绘图表时，通过series.color的自定义函数，根据selectedCountries的状态为每个国家分配对应的颜色，实现选中高亮效果。
• 多选支持：因为我们是基于单个国家的状态切换，而非覆盖式选中，所以天然支持多选操作，用户可以点击多个国家切换选中/未选中状态。

如果需要调整选中样式（比如添加边框、阴影），可以通过修改图表的style选项或者结合CSS实现；如果数据量较大，也可以优化重绘逻辑，比如只更新颜色配置而非全量重绘。

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