ツールチップのテキストを列の色に合わせることは可能ですか?ハイチャートでは、ツールチップのテキストを列の色で適用できますか?
たとえば、私の列が青色の場合、私のツールチップのタイトルは「青色のタイトル」になり、オレンジ色の場合、ツールチップのタイトルは「オレンジ色のタイトル」になります。
これは可能ですか?
ありがとうございます!
ツールチップのテキストを列の色に合わせることは可能ですか?ハイチャートでは、ツールチップのテキストを列の色で適用できますか?
たとえば、私の列が青色の場合、私のツールチップのタイトルは「青色のタイトル」になり、オレンジ色の場合、ツールチップのタイトルは「オレンジ色のタイトル」になります。
これは可能ですか?
ありがとうございます!
あなたは、ツールチップフォーマッタを使用して、シリーズから色を取得し、シリーズのカラー値を含むカスタムスタイルでスパンを返すことができます。
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)
最後に、私は自分で解決策、私が作っただけの小さなミスを発見しました。ここで
は私のソリューションです:
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>';
}
}
}