Javascript Highcharts工具提示背景（根据行）

我正在尝试使用Highcharts使工具提示的背景色与线条的颜色匹配

我正试图找到最合理的本机方法来处理这个问题——如果可以避免在格式化程序中添加带有背景色的

，那就太好了——但如果不是这样，我想这也行得通

线条的颜色和数量会有很大的变化，所以我不想用我放线条颜色的方法来硬编码背景颜色-如果他们能画出与线条颜色相同的背景，那就太好了

我唯一的想法不起作用，我不确定在这种情况下这些功能的范围是什么：

tooltip : {
    backgroundColor: function() {
        return this.line.color;
        //return this.point.color;
    }
}

我的线条颜色设置正常：

series : [
    {
        color : '#fa0'
    }
]

有什么想法吗

---

提前感谢。

除了使用格式化程序之外，无法以其他方式设置此设置。只有这样的东西：

JS:

---

这是一个老问题，但另一种方法是挂接

tooltipRefresh

事件并与一些

jquery

交换。工作代码：

$（函数（）{
$（“#容器”）。高图({
图表：{
类型：'column'，
活动：{
工具提示刷新：函数（e）{
如果（！e.target.hoverSeries）返回；
$（'.highcharts工具提示>路径：类型''的最后一个）
.css（'fill'，e.target.hoverSeries.color）；
}
}
},
xAxis：{
类别：[一月、二月、三月、四月、五月、六月、七月、八月、九月、十月、十一月、十二月]
},
系列：[{
数据：[29.9,71.5,106.4,129.2,144.0,176.0,135.6148.5,216.4194.1,95.6,54.4]
},{
数据：[29.9,71.5,106.4,129.2,144.0,176.0,135.6148.5,216.4194.1,95.6,54.4]
},{
数据：[29.9,71.5,106.4,129.2,144.0,176.0,135.6148.5,216.4194.1,95.6,54.4]
}]
});
});
您也可以尝试连接到
mouseOver
事件

与PawełFus解决方案相比，该解决方案的优势在于，您可以保持工具提示的宽度，这对于良好的锚定是必要的

参考：

jsFiddle:
在我的案例中没有应用css。这里有写css的顺序吗？谢谢您可以在JSFIDLE上重新创建问题吗？正如你所看到的，我的演示运行良好-确保你正确设置了所有选项。有没有一种方法可以在不将backgroundColor设置为null的情况下实现这一点？默认情况下，此选项将删除指针箭头
tooltip: {
        useHTML: true,
        backgroundColor: null,
        borderWidth: 0,
        shadow: false,
        formatter: function(){
            return '<div style="background-color:' + this.series.color + '" class="tooltip"> ' +
                    this.series.name + '<br>' + this.key + '<br>' + this.y +
                '</div>';
        }
    },

.tooltip {
  padding: 5px;
  border-radius: 5px;
  box-shadow: 2px 2px 2px; 
} 

 plotOptions: {
        series: {
            stickyTracking: false,
            events: {
                mouseOver() {
                    const color = arguments[0].target.color;

                    this.chart.tooltip.options.backgroundColor = color; //first time overwrite
                    const tooltipMainBox = document.querySelector(`g.highcharts-tooltip path:last-of-type`);
                    if (tooltipMainBox) {
                      tooltipMainBox.setAttribute('fill', color);
                    }
                }
            }
        }
    }