Highcharts mapChart重载后颜色与悬停效果丢失问题咨询

问题根因 #

1. 未销毁旧图表实例，重复在同一个DOM容器渲染图表导致实例冲突、数据缓存异常，是第二次调用时map遍历逻辑未执行的核心原因
2. 直接修改了Highcharts全局缓存的原始地图数据引用，第一次修改后原始地图数据结构被破坏，第二次加载时无法拿到正确的data数组
3. 在load事件中修改完数据后做全量series更新会触发额外重绘，加剧实例状态混乱，同时未显式保留悬停样式配置导致悬停效果丢失

解决方案 #

方案1：修复每次重建图表的逻辑（适合需要全量重置图表的场景）

首先在外层存储图表实例，每次重建前先销毁旧实例，同时直接在series配置中处理颜色逻辑，不要修改原始地图数据：

// 外层存储图表实例，避免重复初始化冲突
let mapChartInstance = null;

function renderMap(cur_state) {
  // 销毁旧实例，清理缓存
  if (mapChartInstance) {
    mapChartInstance.destroy();
    mapChartInstance = null;
  }

  mapChartInstance = Highcharts.mapChart('你的图表容器ID', {
    chart: {
      backgroundColor: null,
      map: 'countries/au/au-all'
    },
    series: [{
      // 直接基于原始地图数据生成新的data数组，不修改原始引用
      data: Highcharts.maps['countries/au/au-all'].features.map(feature => {
        const pointConfig = {
          'hc-key': feature.properties['hc-key']
        };
        if (pointConfig['hc-key'] === region_dict[cur_state][1]) {
          pointConfig.color = '#ff0000';
        } else {
          pointConfig.color = 'blue';
        }
        return pointConfig;
      }),
      // 显式配置悬停样式，避免默认样式丢失
      states: {
        hover: {
          color: '#a4edba',
          borderColor: '#000000'
        }
      }
    }]
    // 其余你的配置项，比如tooltip、legend等保持不变
  });
}

方案2：局部更新颜色（性能更优，无需每次重建图表）

首次初始化完成后，cur_state变更时只更新对应点的颜色即可：

// 首次初始化仅执行一次
const mapChartInstance = Highcharts.mapChart('你的图表容器ID', {
  chart: {
    backgroundColor: null,
    map: 'countries/au/au-all'
  },
  series: [{
    states: {
      hover: {
        color: '#a4edba',
        borderColor: '#000000'
      }
    }
  }]
  // 其余你的配置项保持不变
});

// cur_state变更时调用该函数即可更新颜色
function updateRegionColor(cur_state) {
  const targetKey = region_dict[cur_state][1];
  // 批量更新所有点的颜色，先不触发重绘
  mapChartInstance.series[0].points.forEach(point => {
    point.update({
      color: point['hc-key'] === targetKey ? '#ff0000' : 'blue'
    }, false);
  });
  // 统一重绘，减少性能消耗
  mapChartInstance.redraw();
}

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