如何在Highcharts中设置系列的工具提示边框颜色 [英] How to set tooltip border color from series in Highcharts

问题描述

默认情况下，边框采用相应系列或点的颜色.但是我想为某个数据点的工具提示设置不同的颜色，而不更改数据点本身的颜色.

By default, the border takes the color of the corresponding series or point. But I'd like to set a different color to the tooltip of a certain data point, without changing the color of the data point itself.

我需要这样的东西:

series: [ { x:1, value: 2.34, tooltip:{borderColor: '#112233'}  }, ... ];

遗憾的是，无法通过一系列设置此属性.

Sadly this property can not be set from a series.

通过在工具提示配置中设置格式化程序回调函数，只能定义工具提示的内部HTML，即，不能从该函数内部更改边框颜色.

By setting a formatter callback function in the tooltip configuration one can only define the inner HTML of the tooltip, i.e. the border color can not be changed from within this function.

这只能通过一些CSS欺骗来实现吗?

Can this only be achieved by some CSS trickery?

推荐答案

可以通过包装tooltip.refresh()方法来实现.

It can be achieved by wrapping tooltip.refresh() method.

首先，我检查是否显示了工具提示，未共享，未拆分(共享或拆分的工具提示需要一些不同的代码).然后，我检查选项是否设置并更改svg元素的stroke属性.

First, I check if the tooltip is shown, not shared, not split (a shared or split tooltip require a little different code). Then, I check if the options are set and change svg element's stroke attribute.

Highcharts.wrap(Highcharts.Tooltip.prototype, 'refresh', function(p, point, mouseEvent) {
p.call(this, point, mouseEvent);

if (!this.isHidden && !this.shared && !this.split) {
  var pointTooltipBorderColor = point && 
                                point.options.tooltip &&
                                point.options.tooltip.borderColor,

    seriesTooltipBorderColor = point && 
                               point.series && 
                               point.series.options.tooltip && 
                               point.series.options.tooltip.borderColor,

    borderColor = pointTooltipBorderColor || seriesTooltipBorderColor,
    label = this.label;

  if (label && borderColor) {
    label.attr({
      stroke: borderColor
    });
  }
}
});

示例: http://jsfiddle.net/oLnfqhmn/2/

这篇关于如何在Highcharts中设置系列的工具提示边框颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！