Highcharts Tilemap：点击图例项时替换隐藏为修改瓦片颜色

问题场景 #

使用Highcharts的Tilemap组件时，默认点击图例项会直接隐藏对应类别的瓦片。我们需要修改这一行为：点击图例项时，切换对应类别瓦片的颜色（比如切换为灰色，再次点击恢复原颜色），而非隐藏瓦片。

实现方案 #

通过自定义图例点击事件，阻止默认隐藏逻辑，同时根据点击的图例项匹配对应数据类别，动态修改瓦片颜色并实现切换效果：

Highcharts.mapChart('container', {
    // 其他基础配置（如title、tooltip等）...
    colorAxis: {
        dataClasses: [{
            from: 1,
            to: 1,
            color: '#828ee3',
            name: 'Субъекты организации и ее представительств'
        }, {
            from: 2,
            to: 2,
            color: '#febf10',
            name: 'Прибыли в субъект из организации'
        }, {
            from: 3,
            to: 3,
            color: '#6fcf97',
            name: 'Прибыли в организацию из субъекта'
        }]
    },
    legend: {
        itemClick: function(e) {
            e.preventDefault(); // 阻止默认隐藏瓦片的动作
            
            const chart = this.chart;
            const dataClassIdx = this.index;
            const targetClass = chart.colorAxis[0].dataClasses[dataClassIdx];
            const originalColor = targetClass.color;
            const dimmedColor = '#cccccc'; // 自定义的高亮/变暗颜色
            
            // 标记当前类别的状态，实现点击切换
            targetClass._dimmed = !targetClass._dimmed;
            
            // 批量更新对应类别的瓦片颜色
            chart.series[0].points.forEach(point => {
                if (point.value === dataClassIdx + 1) {
                    point.update({
                        color: targetClass._dimmed ? dimmedColor : originalColor
                    }, false); // 暂不重绘，提升性能
                }
            });
            
            chart.redraw(); // 统一重绘图表
        }
    },
    // 瓦片数据配置（series）...
});

关键逻辑说明 #

1. 禁用默认行为：通过e.preventDefault()取消图例点击后隐藏瓦片的默认操作。
2. 状态标记：给每个dataClass添加_dimmed属性，记录当前是否处于"变色"状态，实现点击切换效果。
3. 批量更新：遍历所有瓦片数据点，通过point.value匹配对应类别的数据点，批量修改颜色属性。
4. 高效重绘：先批量更新所有目标点（update第二个参数设为false），最后统一调用redraw()，避免多次重绘影响性能。

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