Highcharts Tilemap多分类瓦片问题：图例隐藏后渐变颜色未同步

问题背景 #

我用Highcharts开发Tilemap图表，配置了三个数据分类：

colorAxis: {  // 分类颜色配置
        dataClasses: [{
            from: 1,
            to: 1,
            color: '#828ee3',
            name: 'Субъекты организации и ее представительств'
        }, {
            from: 2,
            to: 2,
            color: '#febf10',
            name: 'Прибыли в субъект из организации'
        }, {
            from: 3,
            to: 3,
            color: '#6fcf97',
            name: 'Прибыли в организацию из субъекта'
        }]
    },

部分瓦片需要同时属于两个分类，所以把它们的value设为0，并自定义渐变颜色：

{
    'hc-a2': 'Калу',
    name: 'Калужская',
    region: 'South',
    x: 4,
    y:6,
    value: 0,
    color: {  // 用渐变实现双颜色
        linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
        stops: [
            [0, '#febf10'],
            [0.5, '#febf10'],
            [0.55, "#fff"],
            [0.6, '#6fcf97'],
            [1, '#6fcf97']
        ]
    }
},

现在遇到的问题是：关闭某个分类图例（比如绿色的分类3）时，带渐变的瓦片里对应的绿色部分依然显示，因为这类瓦片没有关联对应分类的数值，不受图例控制。需要解决这个问题，要么禁止关闭分类，要么找到其他处理方法。

解决方案 #

方案1：直接禁止图例项点击（无法关闭分类） #

如果不需要关闭分类的功能，直接修改图例配置，阻止点击事件：

legend: {
    itemClick: function() {
        return false; // 禁止点击图例关闭分类
    }
}

方案2：根据图例状态动态更新渐变瓦片颜色 #

保留图例交互功能，监听图例点击事件，动态修改渐变瓦片的颜色，同步隐藏/显示对应颜色部分：

plotOptions: {
    tilemap: {
        events: {
            legendItemClick: function(e) {
                const chart = this.chart;
                const clickedLegend = e.target;
                const targetColor = clickedLegend.userOptions.color;
                const shouldShow = !clickedLegend.visible; // 点击后要切换的状态

                // 遍历所有数据点，处理value为0的渐变瓦片
                chart.series[0].data.forEach(point => {
                    if (point.value === 0 && point.color?.stops) {
                        // 复制原渐变配置，避免修改原数据
                        const updatedStops = [...point.color.stops].map(stop => {
                            // 匹配到目标颜色时，切换显示/隐藏
                            if (stop[1] === targetColor) {
                                return [stop[0], shouldShow ? targetColor : 'transparent'];
                            }
                            return stop;
                        });

                        // 更新当前点的颜色，暂不重绘
                        point.update({
                            color: {
                                linearGradient: point.color.linearGradient,
                                stops: updatedStops
                            }
                        }, false);
                    }
                });

                // 统一重绘图表
                chart.redraw();
            }
        }
    }
}

这个方案会在点击图例时，自动把渐变瓦片里对应分类的颜色换成透明（隐藏），再次点击时恢复原颜色，完美同步图例状态。

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