javascriptのグラフ・チャート用ライブラリのトレンドをまとめてみました


Webページでグラフを動的に描画したい場合、基本的にはjavascriptのライブラリを使って描画します。しかし、グラフ描画のライブラリは種類が多くどれを使ってよいか迷うため、ライブラリとトレンドを整理してみました。

グラフ描画用ライブラリまとめ

グラフ描画ライブラリのトレンドをまとめると以下のようになります。トレンドはgoogleトレンドを使い、chart.jsを100としたときの2018年の相対的なトレンドを表しています。利用機能はSVGとCanvasのどちらの機能を使っているかを書いています。

トレンドから見ると、最も使われているライブラリは「chart.js」「d3.js」の2つになります。 有償のものだと「highchart」と「amcharts」が使われています。

「chart.js」は使いやすく簡単に導入することができる印象があります。個人利用で迷ったらまずはchart.jsを使うのが良いかと思います。

「d3.js」は多機能でカスタマイズ性も高いのですが、慣れるまでは難しくプロ向けの印象になります。

CanvasとSVGの違いについて

SVGとCanvasはどちらもブラウザ上で描画を行うための機能ですが、Canvasはビットマップで描画を行い、SVGはベクター形式で複数のDOM要素を組み合わせて描画します。

基本的にはビット単位の細かい描画をするならCanvas、図形を組み合わせた描画を行う場合はSVGを使うことが多いようです。

通常のグラフ描画ではcanvasとSVGで大きな差はないそうですが、大量データを扱うヒートマップなどはcanvasが適しているようです。それ以外はSVGの方がメモリ使用量も少なく、特にモバイル端末ではパフォーマンスに優れるようです。

カテゴリーUI

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です