More than 5 years have passed since last update.

JavaScriptのチャートライブラリのデモまとめ

Last updated at 2019-05-27Posted at 2018-10-29

追記（2019/05/27

今、再びチャートをReactで扱いたくなって調べているのですが、D3系列はReactで扱うには結構気を配らないといけないことが多そうです。

Mediumで見つけた2019年版Reactチャートライブラリ紹介的な記事によると、今はVictoryとか、react-visとかがナウいみたいです。どっちもスターはすごい！

チャート使いたくて、調べました。全てリンクは公式のデモページになっていますので、すぐに動作を確認できます。

結果を先に言うと、総合的にはc3.js、折れ線グラフならChartist.js、散布図ならtaucharts.js、geoならGoogle Chartsかなと。

ライセンスやコードの書きやすさは全然深堀していない、また選定の基準はかなり主観によっているため、この記事は選定の際のリンク集として使うにとどめてください。ちなみにリンクはおすすめ順です。

また私自身は、今回は円グラフのみの使用だったため、シンプルなこちらにしました。

シンプルisベストといった感じ。特にこだわりがないのであれば、これを入れておけば間違いないはず。react-c3jsもあるので、至れり尽くせり。

折れ線グラフが随一の綺麗さ。というかそもそも、サイトがおしゃれで好き。折れ線グラフのアニメーションが、他にはない、見ていて楽しいものがある。折れ線必要な時は、使いたい。

うるさすぎず、ホバーした時の感じが適度で美しい。特に散布図(scatter plot)が大変綺麗。棒グラフなども、必要最低限で整っている。円グラフが見つからなかったので今回は使わなかったが、散布図などが必要なときはぜひ使ってみたいと感じた。

無料の中では量が一番多い。多すぎて、逆に選ぶのめんどくさそう笑
ただ、これをベースに作られたc3.jsはかなり使いやすかったので、自分でカスタマイズすればかなりの可能性を秘めているものと思われる。

グラフの種類として、必要十分なものが揃っている。とりあえずグラフ入れたくて、まぁそこまでこだわりがないならこれでいいかも。geoチャートはかなり使いやすそう。

数はまぁまぁ。各要素にホバーした時に、その詳細をツールチップで表示するタイプ。

量は多い。ホバー時のアクションは他と比べると、快適性とかで少し劣るかなと。
geoチャートあり、ヒートマップなど少し変わったものもあり。
Reactで使いやすそうなのは良い。

量が多い。天気予報チャートやピラミッドチャートなど、他にはないものも多い。React版もある。ホバー時も心地よく、大量に様々なグラフ使いたい、かつ金を払える場合はこれを選びそう。

量多し。geoチャートもある。stockチャートが結構いい感じ。値段も有料の中ではそこまで高くない？

HighstockやHighmapsも含めると種類としては一番多いのではないかと。しかしめちゃお高く、それなら無料のを組み合わせて使ったほうが良いかなという気がした。