Google Chart API でローソク足チャートのオンマウス表示(Tooltip)を変える方法

Google Chart API

みなせあきとです。

前回、Google Chart API で CandleStrick Chart いわゆるローソク足チャートを作成しました。前回はオンマウス表示が初期表示のままで分かりにくいことが課題でした。今回はオンマウス表示をわかりやすく変える方法をご紹介します。

Google Chart API でローソク足グラフを作成する方法

Google Chart API でローソク足グラフを作成する方法は、下記の前回記事をご覧ください。

Google Chart API でローソク足チャートを作成する方法ー日経平均年足チャートをつくってみました
みなせあきとです。 年末年始ということもあり、日経平均の年足がどうなるかという議論を12月頭くらいからよく聞くようになりました。 結果として、2018年は7年ぶりの陰線になりました。 さて、Google で日経平均の年足チ...

Google Chart API の Tooltip

Google Chart API には Tooltip という機能があります。

Advanced Usage という項目の中に Tooltip のリファレンスがあるのですが、公式では「マウスオーバーしたときに表示される小さなボックス」という説明がなされています。

Tooltips: an introduction
Tooltips are the little boxes that pop up when you hover over something.

Tooltips  |  Charts  |  Google Developers

Google Chart API の Tooltip設定方法

Tooltip はデータセットの中の5つめの要素にセットすることができます。CandleStick Chart の DataFormat の項目にも書いてあるように、Col 5 要するに5つ目の要素に与えればいいということです。

前回はいきなり google.visualization.arrayToDataTable メソッドでデータセットをつくりました。今回はまず mydata という配列にセットし、あとで Google Chart API が処理できる形に変更しています。

今回、安値・高値・始値・終値と4つの要素をチャートに表示します。データセットに安値や高値が格納されていますので、これを参照して作ります。データセット時にデータセットの値を参照することはできないため、一旦初期値としてにしてあります。

mydata[ i ][1]:安値
mydata[ i ][2]:終値
mydata[ i ][3]:始値
mydata[ i ][4]:高値

なので、これを安値・高値・始値・終値の順番に入れ替えます。

mydata[ i ][5] にこれを代入させるため for 文を繰り返します。

また、このまま表示させると3桁区切りのカンマが打たれないため、toLocaleString()メソッドを使い、3桁区切りのカンマを表示させています。

Tooltip はデフォルト設定ではオフになっているので、Col 5(5列目)の要素に属性を付与します。

Tooltip をカスタマイズしたチャート

実際に作成したチャートがこちらです。


コード

 

コメント