Highcharts饼图：鼠标悬停切片时如何单独设置对应图例项样式？

我希望在鼠标悬停饼图切片时，为对应的图例项设置样式。目前我可以通过以下plotOptions代码修改整个图例（所有图例项）的样式：

plotOptions: {
    series: {
        point: {
            events: {
                mouseOver: function () {
                    this.series.chart.legend.update({
                        itemStyle: {
                            fontWeight: "bold",
                        },
                    });
                },
                mouseOut: function () {
                     this.series.chart.legend.update({
                         itemStyle: {
                             fontWeight: "normal",
                         },
                     });
                },
            },
        },
    },
},

请问如何访问单个图例项的CSS来进行设置？

解决方法 #

可以直接定位到对应图例项的DOM节点修改样式，无需全局更新图例配置，核心思路是精准找到当前悬停切片对应的图例项，单独调整其样式：

修改后的代码示例 #

plotOptions: {
    series: {
        point: {
            events: {
                mouseOver: function () {
                    // 重置所有图例项的默认样式
                    this.series.chart.legend.allItems.forEach(item => {
                        item.legendItem.css({ fontWeight: 'normal' });
                    });
                    // 高亮当前切片对应的图例项
                    this.series.legendItem.css({ fontWeight: 'bold' });
                },
                mouseOut: function () {
                    // 鼠标移出后恢复所有图例项的默认样式
                    this.series.chart.legend.allItems.forEach(item => {
                        item.legendItem.css({ fontWeight: 'normal' });
                    });
                }
            }
        }
    }
}

关键说明 #

• this.series.legendItem：指向当前悬停切片所属系列对应的图例项DOM元素
• css()：Highcharts内置的DOM样式修改方法，可直接传入CSS属性键值对
• 先重置所有图例项样式再高亮目标项，能避免多个图例项同时保持高亮状态

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