如何在高图中更改工具提示颜色？

Question

我正在尝试更改工具提示背景颜色。这就是它目前的样子。

我使用的格式化程序函数是

     tooltip: {
        useHTML: true,
        enabled: true,
        //backgroundColor: null,
        borderWidth: 0,
        shadow: false,
        formatter: function () {
            var value = '<div style="background-color:red;"><span><b>Market Performance<span style=\'padding-left:50px\'>' + this.x + '</span></b><br/> ' + this.series.name + '$' + this.y + '</span><div>';
            return value;

        },
},

我希望工具提示背景颜色是系列颜色。也请建议我如何填充div，因为如图所示，div是半满红色。提前谢谢。

Answer 1

将格式化程序功能更改为

   tooltip: {
        useHTML: true,
        enabled: true,
        backgroundColor: null,
        borderWidth: 0,
        shadow: false,
        formatter: function () {
            var value = '<div style="background-color:'+ this.series.color+';padding:10px"><span><b>Market Performance<span style=\'padding-left:50px\'>' + this.x + '</span></b><br/> ' + this.series.name + '$' + this.y + '</span><div>';
            return value;
        }
}

以下是示例FIDDLE

Answer 2

您需要使用tooltip.formatter来自定义工具提示的内容并触发SVG工具提示元素上的attr（）函数。此功能允许操作形状的属性。

formatter: function() {
    var color = this.color;

    this.series.chart.tooltip.label.attr({
      'fill': color
    });

    var value = '<span><b>Market Performance<span style=\'padding-left:50px\'>' + this.x + '</span></b><br/> ' + this.series.name + '$' + this.y + '</span>';
    return value;

  },

示例：http://jsfiddle.net/fqcpd32f/