Question

可以将backgroundColor添加到工具提示中作为悬停线吗？

例如，当悬停在蓝色时，工具提示backgroundColor为蓝色

    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/

Answer 1

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

请参阅此代码演示：

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

并且this JSFiddle example正在行动。

Answer 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>';
            }
        },

Highcharts tooltip backgroundColor继承了悬停元素

2 个答案: