色んな方法でWeb上でグラフ(Chart)を表示する。

最近仕事で、サイト上にグラフを作る機会があった。
個人的に気に入っているグラフ描画のためのjsライブラリを紹介と実演してみる。

Highcharts

有名どころ。
https://www.highcharts.com/
個人的に一番好き。
というのも、非常にリッチなUIを提供してくれるのと、複雑なものを簡単に作成することができるようになっている。
例えば後程紹介するGoogleCharts等は、折れ線グラフ(line charts)を作成した場合、
特定のラベルをクリックしてそれを削除する機能がデフォルトでは存在して無い。(実装自体は可能)
Highchartsではそれが無料でデフォルトで使用できるようになっているのだ。
他にもデフォルトで備わっている機能が非常に優秀なのと、
拡張も非常に簡単なため、個人的にはお勧めのライブラリである。
ちなみに、一番簡単な実装は以下。

See the Pen Highcharts_most_simple by blue (@aoiBlue) on CodePen.0

これを色々拡張していくとこうなる。

See the Pen Highcharts_customize by blue (@aoiBlue) on CodePen.0

コンボグラフになっていたり、ズームが出来たり色々変更されている。
やっていること自体は単純で、例えばズーム機能は

これを任意の箇所に追加してあげるだけで実装できてしまう。
https://api.highcharts.com/highcharts/
詳しくはReferenceを読めば色々載っている。

Google Charts

我らがGoogle。
https://developers.google.com/chart/
何といっても強いのは、Google Spread Sheetで集めたデータを、
Google Chartsで視覚化して、Google App Script上で公開するということが可能なことだ。
データを集めるところさえなんとかしてしまえば、
サーバレスにGoogle上で視覚化したデータを見ることができてしまう。
もはや社内ツールのためにサーバーを用意する必要はない時代が来たのかもしれない。

簡単な実装をしてみる。

See the Pen GoogleCharts_simple by blue (@aoiBlue) on CodePen.0

個人的に気になるのはloadという処理が必要なところ。
highchartsは必要なjsだけを読み込む式だったが、
これは一度jsを読み込んだ後必要なものだけloadしているのだろうか・・・？
Googleに限ってそんな無駄に読み込み時間を延ばしそうなことはしないと思うが。

こちらも色々拡張していく。

See the Pen GoogleCharts_customized by blue (@aoiBlue) on CodePen.0

ざっくりした理解だと、
グラフのビジュアライズ部分はoptions、
データの構造自体はaddColumnとデータ自体をいじればよさそう。
他にも、アニメーションの終了イベントなどもとれるようになっているので、
頑張れば色々独自の動きをするグラフを作成できそうである。

ちなみにhighchartsの際にやったようなコンボチャートにする場合、
ロードする処理自体を変えないといけないので注意
(こっちを使う：https://developers.google.com/chart/interactive/docs/gallery/combochart)

まとめ

二つだけの紹介になってしまったが、この二つは抑えておいて損はないと思う。
Googleはやはり大手の安心感があるし、今後も意欲的なエンジニア達がより使いやすく更新し続けてくれるだろう。
Highchartsは優れたUIを提供してくれているので、上手く使い分けていきたい。