様々なJavaScriptのグラフ/チャート描画ライブラリの表示テストページを作った

JavaScriptのグラフ/チャート描画ライブラリの機能比較とまとめというページを作ったので、 そこで比較したライブラリの実装をサクッと確認できるページを作りました。 コードは右クリックから「ページのソースを表示」で見やすいようにしてある。

表示テストのサンプルはどれも多数のカラムを持つLineChartです。 C3.jsの表示例は以下。

他のライブラリも実装が面倒ではない範囲でなるべく同じ表示になるようにしています。 またカラムを多めにする事で、凡例の表示テストも兼ねている。 簡易的なものだけど描画速度も計測できるようにもしてある。


実装を確認できるライブラリのリストは以下。

• Echarts (Custom Build)
• Chartist
• Chart.js
• Google Charts
• C3.js
• Plotly.js (Custom Build)
• Vis.js
• Rickshaw

このリストを使ってデータ数1e2〜1e7のベンチマークをしてみました (下図)。 JavaScript/CSSはあらかじめキャッシュされている状態を想定してます。 数回しか実行してない簡易的なベンチマークなので参考程度に留めてください。

上記の比較では、データ数を増やしたらすべて表示するようにしています。 表示数を調整しやすいライブラリの場合、部分的にしか表示しない事でかなりレンダリング速度を向上できます。 同様の理由により、まず部分的なデータでレンダリングして、後からバックグラウンドで更新しやすい仕組みがあると良いと思います。


何となく作ったページですが、ライブラリごとに微妙に異なるデータの扱い方や、初期状態でどれくらい高機能なのかをすぐに比較できて、割と便利かも。