HTMLにグラフを描画するツールの状況を調査してみた

HTMLにグラフを描画するツールの状況を調査してみました。

まずは、ざっとググってみて出てくるツールをリストアップ
・Google Charts
・Chart.js
・d3.js
・ECharts
・amCharts
・HighCharts

それらをGoogleトレンドにかけてGoogle検索状況を見てみる。
こんな感じでした。

Google Chartsの一強で、他はあまり変わらないかなって感じですね。ちなみに、上記のグラフはGoogle Chartsが使用されているそうですね。

それぞれのツールについてザックリ調査してみます。

Google Charts

https://developers.google.com/chart/
使用企業：Google
ライブラリがダウンロードできない。そのため常にGoogle経由で描画処理しなければならない。上記理由により敬遠のため、調査を飛ばします。Googleのサービスを使用すると所々に出てくるグラフは簡潔で読み取りやすく魅力的なので残念です。

f:id:somegoro:20190327132737p:plain — Google検索で「99ドルっていくら」と検索した際に表示されるグラフ

Chart.js

https://www.chartjs.org/
商用利用無料
使用企業：見当たらない
HTML5 Canvasを使用してグラフを描画する。その特性により、ブラウザ側で描画処理を行うことになるので表示速度が少々心配です。処理が軽く十分な表示速度なのか、あるいは描画処理をサーバー側で実施する方法があるのか、その辺を要調査かと思います。

d3.js

https://d3js.org/
商用利用無料
使用企業：見当たらない
様々なグラフ描画ライブラリが出ているが、それらはこのd3.jsを拡張して作られていることが多い。学ぶのが大変なのでグラフ描画初心者向けではない。

ECharts

https://echarts.baidu.com/
中国企業baiduが作った描画ツール。baiduには良くない思い出があるので敬遠。調査を飛ばします。

amCharts

https://www.amcharts.com/
商用利用無料、右下リンク削除は有料
使用企業：MicroSoft、Amazon
SVGでグラフ描画する。GUIからグラフのソースコードを生成できる。

HighCharts

https://www.highcharts.com/blog/products/highcharts/
商用利用は有料、個人サイトでは無料、右下リンク削除は有料
使用企業：Facebook、MicroSoft、stackoverflow
SVGでグラフ描画する。

ということで、主要と思われるグラフ描画ツールを調査してみました。大規模で複雑な処理が必要であれば、次の２つが良い選択かと思います。
・amCharts
・HighCharts

小規模でシンプルな処理ならば、Chart.jsでも良いんじゃないかなと思いました。
・Chart.js

これから勉強するなら、「大は小を兼ねる」「GUIからソースコード自動生成」ということでamChartsが良いと思います。GUIから自動生成したソースコードを確認しながらであれば勉強も捗ります。

あとは、今回の調査では実施していませんが他のツールとの相性でこれから勉強するものを選択するのも良い手段かと思います。私はSpring Bootを好んで使用するので、JSライブラリを使用するとすればVue.jsが良いかなと考えています。なのでVue.jsと相性の良いグラフ描画ツールを次回調査してみようと思います。