Japanese style web design いろはクロス
これまでの記事でHighchartsの導入方法とy軸カスタマイズを解説しました。
今回はTooltipの見せ方を変更してみたいと思います。
Highchartsの使い方：Tooltipをカスタマイズする方法
Highchartsの導入方法と縦軸の調整についてはこちらの記事にまとめてあります。
今回も同じ棒グラフを使ってツールチップの表示を調整します。
こちらはカスタマイズに使うデモグラフのコード全文。Tooltip調整前です。Tooltipはデフォルトで表示されるので、まだ記述はありません。
21行目から始まるyAxisの下（27行目～）にツールチップ用の設定を書くことにします。
Tooltipに縦軸、横軸、単位を表示させる
完成形はこちら。横軸：縦軸数値＋単位を表示させます。
100などキリの良い数字は小数点一桁切り捨て表示とします。
tooltip: { },の中に記述します。
yAxisの下に記述したソース抜粋。
Tooltipの表示を調整する為にformatter:function(){return ～を使用しました。
Tooltip部分を順番に見てみましょう。
returnの後のthis.xはx軸の値を意味します。表示させたい項目は+(プラス)で連結します。シングルクォーテーションで囲めば文字列も表示させる事が可能。ここでは「：」と「％」ですね。
そしてthis.yはy軸の値です。
小数点の扱いですが、キリの良い数値はデフォルトで切り捨てられるので特に指定はしていません。
今回はthis,xとthis.yしか使っていませんが、他にも
- this.point
- stackTotal
- this.parcentage
- this.series
などを利用する事ができます。
Tooltip:小数点を調整したい時
小数点の表示を調整したい時は、Highcharts.numberFormat()を利用します。
キリの良い数字でも小数点1桁表示する
例）100→100.0と表示
this.yの後ろを1にします。
小数点以下表示しない。（小数点1桁切り捨て/切り上げ））
this.yの後ろを0にします。
金額表示にしたい
金額表示の場合も同様にHighcharts.numberFormat()で調整できます。
y軸の表示変える方法はこちらをご参照下さい。
ガイド線を表示させる
x軸から垂直にガイドが伸びます。線の太さや色を調整することもできます。
