2017-03-29 4 views
-2

ツールチップのテキストを列の色に合わせることは可能ですか?ハイチャートでは、ツールチップのテキストを列の色で適用できますか?

たとえば、私の列が青色の場合、私のツールチップのタイトルは「青色のタイトル」になり、オレンジ色の場合、ツールチップのタイトルは「オレンジ色のタイトル」になります。

これは可能ですか?

ありがとうございます!

答えて

0

あなたは、ツールチップフォーマッタを使用して、シリーズから色を取得し、シリーズのカラー値を含むカスタムスタイルでスパンを返すことができます。

const options = { 
    chart: { type: 'column' }, 
    series: [...Array(5)].map(() => ({ data: [...Array(3)].map(Math.random) })), 
    tooltip: { 
    formatter() { 
     return `<span style="color: ${this.series.color}"> 
     My new tooltip 
      x: ${this.x} y: ${this.y} 
     </span>` 
    } 
    } 
} 

const chart = Highcharts.chart('container', options) 

https://jsfiddle.net/4p12sf2k/

0

最後に、私は自分で解決策、私が作っただけの小さなミスを発見しました。ここで

は私のソリューションです:

tooltip: { 
      formatter: function() { 

        if (this.color == "#d8662c") { 
         return '<b>Title 1</b>'; 
        } else if (this.color == "#009dc1") { 
         return '<b>Title 2</b>'; 
        } else { 
         return return '<b>Title 3</b>'; 
        } 

       } 
     } 
関連する問題