Posted at

JavaScriptのグラフ描画ライブラリ13個から自分に合いそうな3つを選定した

仕事でWebページにグラフの描画が必要だったので、色々とライブラリを調べてみました。

実際に試してみるライブラリを3つまで絞ってみたので、選んだもの・選ばなかったものの理由など簡単に残しておきます。(※2019/8/13現在)

ざっと調べただけなので、使った上での判断ではないです。

選んだ3つのライブラリに関しては、実際に使ってまた記事を書こうと思ってます。


試してみるライブラリ3つ

まず、使ってみようと思ったのは以下の3つです。

まず、Chart.jsとD3.jsに関しては有名なライブラリでWeb上の情報も多いのでとりあえず試してみることにしました。

Chart.jsは日本語ドキュメントが充実しているのと、vue-chartjsというVue.jsのラッパーがあるのも個人的には嬉しいポイントでした。

D3.jsは理解すればグラフやチャートだけではなく、データのビジュアライズで活用する場面が多そうです。

CHARTIST.JSはグラフ描画のライブラリの中では比較的軽量(圧縮版で40KB)というところとCSSでカスタマイズしやすそうなのが気になったので選びました。


使わないことにしたライブラリ

使わないと言っても、案件や仕様など状況次第で変わる可能性はあるのであくまで今回はという話です。


商用の場合に有料

予算の厳しい案件だったので、商用利用で有料になるものは選択肢から外しました。

ただ、有料のものはやはりクオリティは高そうなので機会があれば使ってみたいです。


D3.jsのラッパー

D3.jsのラッパーも多かったのですが、D3.jsと一緒に読み込むとファイルサイズが400KB以上になってしまうというところで候補から外しました。

あと、これらを覚えるよりかはD3.jsで頑張れば同じようなことができるかなという短絡的な考えもちょっとあります。


ファイルサイズが大きい

多機能なものがファイルサイズが大きくなってしまうのはしょうがないのですが、今回はそんなに多機能なものを求めていないというところもあり、ライブラリ単体で300KBを超えるようなものは選択肢から外しました。


学習コストが高そう

Google Chartsは書き方が独特だったのでちょっと学習コスト高そうだなというところで除外しましたが、これも機会があれば触りたいです。


参考

JavaScriptでグラフ描画入門!全8個のライブラリをコード付きで一挙に解説!

チャート、グラフを書くのに良さそうなJavascriptライブラリ6選

【無料】チャート/グラフ作成用JavaScriptライブラリを比較!おすすめ5選