2019年4月19日金曜日

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.js7473900335231039/339
C3.js443752573448299811/209
Chartist40214+11508+11521198/77
Chart.js156721+521+42931265/90
Google Charts117113314245-1393/501
D3.js242740083961N/A
dc.js36060741266542N/A
NVD3.js49609284196844N/A
Plotly.js30503630100054119/368
Vis.js690222377778231455/148
ToastUI Charts489065259114097not work
Rickshaw23261660096347871/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強という刷り込みがあったのですが、他にも凄いライブラリがたくさんありました。 ファイルサイズも「こんなに違うのか…」とも驚きました。 レスポンシブ表示への最近のライブラリの取り組み姿勢も凄いなと感じました。 きちんと比較してみないとわからないものですね。

参考:

0 件のコメント:

コメントを投稿