Highcharts 工具提示背景颜色继承自悬停元素答案

【问题标题】：Highcharts tooltip backgroundColor inherit from the hovered elementHighcharts 工具提示背景颜色继承自悬停元素
【发布时间】：2015-04-27 13:33:40
【问题描述】：

是否可以将背景颜色添加到工具提示中作为悬停线？

例如，当鼠标悬停在蓝色上时，工具提示背景颜色为蓝色

    tooltip: {
            borderWidth: 0,
            backgroundColor: "rgba(255,255,255,0)",
            borderRadius: 0,
            shadow: false,
            useHTML: true,
            percentageDecimals: 2,
            backgroundColor: "rgba(255,255,255,1)",
            formatter: function () {
                return '<div class="tooltop">'+this.point.name + '<br />' + '<b>' + Highcharts.numberFormat(this.y).replace(",", " ") + ' Kč [' + Highcharts.numberFormat(this.percentage, 2) + '%]</b></div>';
            }
        }

http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/tooltip/style/

【问题讨论】：

标签： javascript highcharts

【解决方案1】：

您可以使用系列的mouseOver 事件来更改工具提示的填充颜色。

查看此代码演示：

plotOptions: {
    series: {
        events: {
            mouseOver: function(event) {
                $(".highcharts-tooltip > path:last").attr("fill", this.color);
            }
        }
    }
}

还有this JSFiddle example 在行动中。

【讨论】：

【解决方案2】：

您可以将 useHTML 设置为 true，禁用填充并在 div 中添加样式参数。示例：http://jsfiddle.net/50pvg4b3/

tooltip: {
            useHTML:true,
            style:{
                padding:0
            },
            formatter: function () {
                return '<div class="tooltip" style="background-color:'+this.series.color+';">'+this.point.name + '<br />' + '<b>' + Highcharts.numberFormat(this.y).replace(",", " ") + ' Kč [' + Highcharts.numberFormat(this.percentage, 2) + '%]</b></div>';
            }
        },

【讨论】：