Highstockでデータを%換算して描画する

2016.08.25.木
JavaScript

再び溝畑です。

OL2→OL2→Vim→OL3ときたので、さすがに別のことを書きます。
今回はグラフです。

JavaScriptのグラフライブラリ、沢山ありますね。
どれを選んで良いのか分からない!
そんなときは、このサイトがオススメです。
JavaScript Graphing Library Comparison

必要な条件で絞り込んで、用途に応じたライブラリが選べます。

自分が少しでも触ったことがあるものは
・Highcharts
・Highstock
・Dygraphs
・C3.js(D3.js絡みで)
その中でもHighcharts、Highstockにはお世話になってます。
今回はHighstockを使って、複数の単位のデータを1グラフに描画してみたいと思います。

Highstock

Highstockについては公式のデモを見ると大体掴めるはずです。
Highstock Demo
見ての通り、時系列のグラフを描画するのに特化しています。

個人で使う分には無料で、商用になると有料です。

グラフの描画方法なんかは、DEMOのコードを見つつ、
APIリファレンスを見ながらオプションをいじると良いと思います。
このAPIリファレンスですが、ほとんどのオプションにサンプルが用意されています。
JsFiddleへのリンクがあるので、自由にいじって変化を確認できるのがありがたいですね。

グラフの描画

手始めに、簡単なグラフの描画から。


APIリファレンスの通りに、ほしいオプションを書いていくだけです。
dataには[[x,y],[x,y]…]の形の配列を渡すとOKです。
このとき、XはUNIXTIMEにしてください。

すると、こんな感じのグラフが簡単に描画できます。
折れ線グラフサンプル

2軸のグラフ

さて、別の単位のデータを一緒に表示させたいよ!となったとします。
こんなときはYを2軸にしてあげると良いです。


yAxisオプションを配列で追加します。
oppositeをfalseにすると軸がグラフの左側に表示されます。
デフォルトはtrueなので、右に表示されています。

そして、seriesではどのyAxisを使うのかを指定します。
今回は、0ならレンジが0-50の軸、1なら0-300の軸となります。

2軸のグラフサンプル
2軸表示されているのが分かると思います。

もっとデータ増やしたいよ

問題は、もっとデータが増えて、それをひとつのグラフに表示したい。となった場合。。。
単位まとめてグラフを分けたら?と言われたらそれまでですが、そういうわけにもいかないときはあります。

そういうときは、全てのデータを%換算して、表示を考えるわけですが、
そうすると今度はツールチップには実値がほしい…となります。

リファレンスを見てみると、データは[[x,y]…]形式だけでなく、


こんな形でも可能です。

となると、ただの力技ですが、全てのデータを%換算して、xに持たせます。
そして、換算前の実値をnameに放り込んでみるとどうでしょう…?

やってみよう

データの持たせ方を変えてみても、そのままではツールチップにはxの値が表示されます。
なので、ツールチップを表示を変更していきます。
ツールチップの表示は、tooltip.formatterを書くとカスタマイズできます。


パーセント換算したサンプル
表示は%、ツールチップは実値になりました!
data1は0-50、data2は0-300、data3は0-150をレンジとしています。
サンプルは時間の表示をサボっていますが、this.xで時間がとれるので、上手く変換すればOKです。

注意点としては、長期間のデータを表示していると、特定の期間以上ではnameが取得できなくなるので、少し考える必要があります。
そうなったときは、val.series.options.dataに、入れたデータが入っているので、そこから取得できると思います。

最後に

ただの力技でしたが、いかがでしょうか。
複数のデータを分けずに一気に表示したいという場面は、意外とあると思いますよ(ない?)

Highstockは簡単に時系列グラフが描画できるのでオススメです!
商用で使う場合はライセンス買いましょう。。。

-->
mizobata

mizobata の紹介

主にJavaScriptで視覚化がお好きな人。 OpenLayersとかで地図周りと、Highchartsとかでグラフ化など...。 D3.jsなんかも少々。 JSフレームワークはVue.jsから。 最近Angular触ってます。 エディタはもちろん、Vim です。 TypeScriptのときはVSCode。 (VSCode Vim入れてます)