ハイチャートのシリーズからツールチップのボーダーカラーを設定する方法

Question

デフォルトでは、ボーダーは対応するシリーズまたはポイントの色を使用します。しかし、データポイント自体の色を変更することなく、特定のデータポイントのツールチップに異なる色を設定したいと思います。

私はこのような何か必要：

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

は、悲しいことに、このプロパティは、シリーズから設定することはできませんが。

ツールチップ設定でフォーマッタコールバック関数を設定すると、ツールチップの内部HTMLのみを定義できます。つまり、この関数内から境界線の色を変更することはできません。

これはいくつかのCSSトリッキーによってのみ達成できますか？

Answer 1

これは、tooltip.refresh（）メソッドをラップすることで実現できます。

まず、ツールチップが表示されているかどうかを確認します。共有されているかどうか、分割されていないかどうかを確認します。次に、オプションが設定されているかどうかをチェックし、要素のストローク属性を変更します。

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/