ここでは、コード例とともに、igFinancialChart コントロールのツールチップを無効にする方法およびカスタム ツールチップを作成する方法を説明します。
igFinancialChart コントロールで、マウス カーソルがシリーズ上にホバーするときにツールチップは表示されます。
igFinancialChart コントロールは、各データ シリーズにデフォルト ツールチップを提供します。デフォルト ツールチップは、特定の項目 (時間、開値、高値、低値、終値、出来高など) に関するすべての情報を表示し、シリーズ スタイルに一致するためにスタイルが設定されます。
デフォルト ツールチップが適さない場合、カスタム ツールチップを設定することもできます。ツールチップは次の特性をカスタマイズできます。
ツールチップのコンテンツ
ツールチップのルック アンド フィール
デフォルトのツールチップを使用する場合、ツールチップの構造は、igFinancialChart コントロールの tooltipTemplate オプションにテンプレート要素の ID 文字列を提供してカスタマイズできます。
以下のスクリーン ショットは、igFinancialChart のデフォルト ツールチップについて紹介します。
この例は、任意のデータ ポイントの売上高の開値、高値、低値、および終値に関する情報をツールチップで表示する方法を示します。
図 1: カスタム ツールチップを持つ igFinancialChart コントロール
チャートのツールチップのカスタム スタイルを追加します。
HTML の場合:
<div style="background: white;border-style: solid;border-width: 1px;">
<div style="font-weight:bold;">${series.title}</div>
<div style="color:mediumpurple;">Open: ${item.open}</div>
<div style="color:red;">High: ${item.high}</div>
<div>Low: ${item.low}</div>
<div>Close: ${item.close}</div>
<div>Volume: ${item.volume}</div>
</div>
</script>igFinancialChart にカスタム ツールチップ スタイルを設定します。
JavaScript の場合:
$("#chart").igFinancialChart({
dataSource: data,
tooltipTemplate: "chartTooltip"
});ツールチップを表示しないために空の tooltipTemplate を設定します。
HTML の場合:
<script id="chartTooltip" type="text/tmpl">
</script>オンラインで表示: GitHub