2017-03-13 2 views
0

Highcharts tooltip background according to lineHighchartsツールチップの背景(設定なしのbackgroundColor =ヌル)私はこれと同じ問題が持っている

が、nullにbackgroundColorを設定すると、ポインタの矢印が消えますので、ここで提供されるソリューションは、私のために動作しませんが。enter image description here

 args.options = Object.assign(args.options, {backgroundColor : this.series.color}); 
     this.color = this.series.color; 

しかしF:

は、したがって、なぜ私はシリーズの色へのアクセス権を持っているフォーマッタ自体からツールチップの背景色を更新しようとして取り組んできました何らかの理由で最初の色の交換だけが私に役立ちます。それに続くツールチップには、最初に更新した色が表示されます。

まずホバー:enter image description here セカンドホバー:enter image description here

まずホバー:enter image description here セカンドホバー:問題のenter image description here

デモ:http://jsfiddle.net/GGQ2a/23/

が更新ページ数回異なるシリーズに移動して問題を確認します。

は、私はすべてのホバー上の色を変更する必要があり、何らかの理由で交換が唯一あなたがTooltip.refresh()メソッドをラップし、ポイントのシリーズの色に応じたツールチップの背景を変更することができますarroundの

答えて

2

初めて取り上げます。

const H = Highcharts; 

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

    const label = this.label; 

    if (point && label) { 
    label.attr({ 
     fill: point.series.color 
    }); 
    } 
}); 

例:http://jsfiddle.net/t38x6kug/

+0

この解決策の問題(!それは動作しませんが)私はreactJSを使用していますが、私はこのようhighchartsのツールチップproptypeを変更すると、それがページ上のすべての私のhighchartsを変更するということですこの配色に従ってください。私の設定オブジェクトでこれを指定する方法はありますか? – es3735746

+0

基本的にこのソリューションはHighchartsライブラリを拡張しています。これを処理するきれいな方法は、別のファイルをラッパーで作成し、ハイチャートの通常のプラグインとしてロードすることです。もう1つの小切手を追加することができます。 backgroundColorが 'series'に設定されている場合 - チャートのオプションに設定されているかどうか - http://jsfiddle.net/t38x6kug/1/ – morganfree

関連する問題