Highcharts柱状图悬停tooltip：年度OKR与累计值颜色显示异常求助

问题出在你当前的tooltip格式化代码中，两个条目都使用了this.color（当前悬停系列的颜色），所以导致颜色一致。要实现两个条目显示不同颜色，需要分别获取两个系列对应的颜色值，替换到对应的span样式中。

修改后的代码如下：

tooltip: { 
    formatter: function() {  
        let xAxisValue = this.point.name;  
        let yAxisValue = this.y;
        let xAxisName = this.series.name;
        // 定义两个系列的颜色变量
        let series0Color = '';
        let series1Color = '';
        
        if(hasMultipleCols){
            if(typeof chartArrayData[1] != 'undefined') { 
                yAxisValue =  chartArrayData[1].data[this.point.index];
                xAxisValue =  chartArrayData[0].data[this.point.index];
                xAxisName  =  chartArrayData[0].name;
                yAxisName =   chartArrayData[1].name;
                // 获取两个系列的颜色，若系列对象无color属性可替换为默认色
                series0Color = chartArrayData[0].color || '#2f7ed8';
                series1Color = chartArrayData[1].color || '#0d233a';
            }
        }
        // 分别使用对应系列的颜色渲染两个条目
        return `<span style="color:${series1Color}">●</span> ${yAxisName}: <b>${yAxisValue}</b><br/><span style="color:${series0Color}">●</span> ${xAxisName}: <b>${xAxisValue}</b>`;
    },  
}

关键修改说明： #

• 新增series0Color和series1Color变量，分别从chartArrayData的两个系列对象中获取专属颜色，同时添加默认色兜底避免报错
• 在返回的tooltip HTML结构中，将两个条目的颜色分别绑定到对应系列的颜色值，实现「年度OKR」和「累计值」的颜色区分
• 如果你的图表库中系列颜色的存储路径不同（比如部分库存在options.color下），可调整颜色获取的属性路径，确保能正确拿到对应系列的颜色值

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