JavaScript で折れ線グラフを表示したくなったので、3種類のライブラリを比較検討することにしました。 最近はずっと TypeScript しか使っていないので型定義があるものに限定しようと思います。 型がないとつらいです。
選択肢はたくさん
生成 AI 1に聞いてみたところ以下のような選択肢があるようです。
- Chart.js
- Apache ECharts
- Plotly.js
- ApexCharts
- Highcharts
今回は料金的に制約がない上の3つを比較してみようと思います。
描画方式
| ライブラリ | 描画方式 |
|---|---|
| Chart.js | Canvas 限定 2 |
| Apache ECharts | Canvas / SVG 切り替え可能 3 |
| Plotly.js | 基本 SVG、一部形式で WebGL (Canvas) も併用可能 4 |
SVG 対応しているものもあるようですが、 グラフの要素数が多くなると重くなる気しかしない 5 ので、 SVG は情報量が少ないグラフ向けになると思います。
逆に Canvas だとすべての情報が1枚の画像になってしまうので、 要素のクリックに反応するなどの動的な機能が作りづらくなります。
SVG で描画した場合は SVG としてエクスポートできるのはもちろん、 PNG にも変換可能です。
Canvas に描画するタイプは PNG にはできますが、 SVG にはできません。 ブラウザによっては jpg や webp にも変換可能です。
SVG と Canvas のいいところを取ったのが Plotly.js のバランス型になるようです。
Chart.js を試す
※ CSS は記述していません
適当なサンプルデータ作成を生成 AI にお願いしたら sin のグラフができたのでそれをそのまま使います。
Apache ECharts を試す
※ CSS は記述していません
Plotly.js を試す
※ CSS は記述していません
Plotly.js でズームの縮小範囲を限定するには
plotly_relayout イベントにフックして処理を書く必要があるようです。
試した機能について
上記のサンプルは、以下の機能があれば使えるように揃えています。
- タイトル
- 軸ラベル
- 凡例
- ツールバー
- ズーム
- ポップアップ (ホバーでカーソル位置の値がでるやつ)
比較
不足している機能についてはカスタマイズすれば追加できるようですが、 標準機能で一通りそろっている Apache ECharts は手軽でいいなと思いました。
操作性に関しては Plotly.js の範囲選択すると拡大、ダブルクリックで元に戻るというのが一番快適に感じます。 Apache ECharts はドラッグで移動なのが分析系の UI としてはあまり見かけない形ですが、 下部のスライダーで範囲選択と範囲調整可能なので十分だと思います。
見た目に関しては Apache ECharts がいい感じに見えます。
それぞれカスタマイズ可能な部分もあるようですが、 私は楽をしたいタイプなので、この中だと Apache ECharts を選択しがちです。
まとめ
折れ線グラフ以外の表示だったり、カスタマイズをしたくなったり、 大量のデータを表示したいときのパフォーマンスだったりと、 状況によって適切なライブラリは異なると思います。
今回はあまり手間をかけずに折れ線グラフを出したかったので Apache ECharts がよさそうという結論になりました。 もう少し Apache ECharts を使い込んで、より深く理解してみようと思います。