JavaScriptのグラフ/チャート描画ライブラリの機能比較とまとめ

JavaScriptのグラフ表示ライブラリに困ったので、まとめてみました。

あくまで私にとって良さそうなものを選びたかっただけなので、いくつかのライブラリは比較から除外しています。まずHighCharts, CanvasJS, Chartwork.jsとった高機能だけど有料なライブラリは比較していない。あまり有名でないものとしてはFusionCharts, Plottable, n3-charts, dygraphs, WebCola, amCharts, ember-charts, ZingChart, EJSCharts, uvCharts, tauCharts, Stardust, QuickChartなどもあるけど、GitHubの4000スターで足切り。有名なものではReact限定のRecharts、jQuery限定のFlot、仕様が複雑なVegaを除外した。他にもいくつか気になったものがあるけど、絶賛開発中でよくわからないところは除外した。

私がグラフ描画ライブラリで重要と思っている機能面での比較項目は以下。 ◯◯チャートに対応しているかどうかなどは、ファイルサイズとの兼ね合いもあるので考えない。

1. 凡例クリックで表示切替: 理解の手助けに便利

最近のライブラリでは凡例クリックで表示切替は標準装備されつつある。この機能があるとグラフがグッと見やすくなる。 Google Chartsは標準搭載されてないけど、自作で実現は可能です。ただこのような追加実装は複雑なので、好ましい状態ではありません。

2. View Finder: グラフ内のx軸が増えるほど必要

時系列データのようにグラフ内のデータが増えると、特定のレンジだけを表示したいという需要が高まります。グラフ外のボタンから調整すれば一応は何とかなるけど、スマホなどでは非常に手間なので、表示領域をマウス操作だけで調整できると嬉しいです。

3. Annotation: グラフ内のカラム数が増えるほど必要

カラム数が増えてくるとグラフのデータそのものをきちんと見る事は難しくなります。重要な部分に何らかのAnnotationを、「簡単に」付けられると嬉しいです (下図)。ちなみにこのグラフ、意外と作れないライブラリが多い。

4. スマホでの綺麗な表示

Google Chartsはカラム数が増えてくると、まずスマホでの凡例の表示が酷い事になります (下図)。 Google Chartsでは可能な限り配置を変更しないようにする結果、収まりきらなくなった凡例によってグラフが崩れてしまうのです。たぶんスマホでは凡例を消して表示するのが一番綺麗かなあ。凡例の実装の仕方はライブラリによって大きく異なるので、表示の綺麗さを独断と偏見で評価付けてみました。イメージを掴みたい人のためにテストページも作ったので参考にしてください。

その他の比較項目は自分の感じた印象値によるオレオレ採点です。まず実装の簡単さに関してはドキュメント、サンプル、仕様のわかりやすさを重視して評価しました。 ◯評価なら仕様を眺めて2-3分でグラフを表示できるくらいわかりやすいし、複雑な事をしようとしてもすぐにわかるライブラリと思う。 更新頻度も一応載せました。

前置きが長くなったけど、以下に比較表を載せます。

名称	凡例で表示切替	View Finder	Anno tation	スマホ表示	実装の簡単さ	更新頻度
EChart.js	◎	◎	△	◯ (色々と問題)	◎	◎
C3.js	◎	×	△	◎	◎	◎
Chartist	◎	×	◯	◎	◎	△
Chart.js	◯	×	◯	◯ (縮小時が汚い)	◯	◎
Google Charts	△ (要自作)	×	◎	×	△	◎？
D3.js	◯	×	△ (要自作)	◎	×	◯
dc.js	◯	◯	△ (要自作)	◎？	△	◎
NVD3.js	◯	◯	×？	◎？	△	△
Plotly.js	◎	◯？	◎	△ (量次第)	◯	◯
Vis.js	◯ (要自作)	×	◯	△ (見にくい)	◯	×
ToastUI Charts	◎	×	×	◯？	◯	◎
Rickshaw	◎	◎	◯	◯ (CSS面倒)	◯ (CSS面倒)	×

機能が増えれば当然ながらファイルイズも増えるので、調べてみました。依存ライブラリも含めたサイズになっているので注意してください。ついでにGitHubのスター数も執筆時点の状態で比較しました。またあまり当てにはならないですが、簡易的なベンチマークも載せました。左がキャッシュなしで、右がキャッシュありの描画速度です。 D3.js系の実装が面倒なものは確認しなかった。データ数1000のレンダリング速度について書いていますが、他のデータ数についてはテストページを参考にしてください。

名称	JavaScript Size	CSS Size	GitHub Star	Speed (ms)
EChart.js	747390	0	33523	1039/339
C3.js	443752	57344	8299	811/209
Chartist	40214+	11508+	11521	198/77
Chart.js	156721+	521+	42931	265/90
Google Charts	1171133	14245	-	1393/501
D3.js	242740	0	83961	N/A
dc.js	360607	4126	6542	N/A
NVD3.js	496092	8419	6844	N/A
Plotly.js	3050363	0	10005	4119/368
Vis.js	69022	23777	7823	1455/148
ToastUI Charts	489065	25911	4097	not work
Rickshaw	232616	6009	6347	871/45

総評

何も設定せず高機能なグラフを作りたいならPlotly.jsが良さそう。ただし素の状態ではあまりにも重いので、カスタムビルドしたほうが良いと思う。 plotly-basic.min.jsを使うだけでもキャッシュに載っていない時の表示が400msくらいに短縮できる。
EChart.jsは少し設定必要だけど、高機能なのに凄く使いやすい。公式のカスタムビルドを適当に使うと、288182 Bytesとまあまあのサイズになった。カスタム化するとキャッシュに載っていなくても300msくらいで表示できるので、なかなか凄い。
軽量なレンダリングを目指すならChartist, Chart.jsが良さそうに思います。キャッシュに載りさえすればRickshawも早い。機能とバランスが良いのはChart.jsかな。

データ数を増やしても一番安定していたのはPlotly.jsでした (テストページ参照)。やたら安定しているのはstack.glの効果なのだろうか。
C3.jsは見栄えが綺麗で仕様もシンプルで、サクッと動かすぶんにはとても使いやすいライブラリに見えます。カラムのデータをまとめて表示してくれるのも便利。
D3.js系は色々なものがあるのですが、D3.jsの仕様変更と進化が早いせいで、更新に追随できていないライブラリが多いのが気になります。あとカスタムビルドしにくいのは難点かも知れません。

私自身もグラフ描画と言えばGoogle Charts, Chart.js, D3.jsの3強という刷り込みがあったのですが、他にも凄いライブラリがたくさんありました。ファイルサイズも「こんなに違うのか…」とも驚きました。レスポンシブ表示への最近のライブラリの取り組み姿勢も凄いなと感じました。きちんと比較してみないとわからないものですね。

参考:

marmooo's blog

2019年4月19日金曜日