オススメかもしれないチャート系JSライブラリ5つ

Web制作に限らずグラフって重要なものだと思います。数年前から「ビッグデータ」という言葉もよく目にしますし。

というわけで、JavaScriptまたはjQueryでチャート描画系のライブラリを挙げてみたいと思います。

Highcharts

商用有料です。

HighCharts デモページ

実際のサイト制作で使ったことはないんですが、いずれ使う場面もあるかと思い実験はいろいろしました。

かなり高機能です。もっと時間を使って実験したい。

金額については、問い合わせなどしていないので正確には判りませんが、一番安くて「USD 410.00」(2017年5月現在)だそうな。結構高いです。

amCharts

こちらも商用有料。

amCharts デモページ

Highchartsと同程度(当社比)に高機能。

こちらは1サイトで「$140」(2017年5月現在)。Highchartsよりかなり安いですね。

また、Highchartsも同様ですが、株価表示に特化したバージョンもあります。

Chart.js

フリーで商用利用可のチャート系JSとしてはかなり有名ですね。

Chart.js サンプルページ

上記サンプルページでは、簡単にデータを追加、削除などができていろいろなパターンを確認できます。

npmおよびbowerでのインストールが可能。

CDNは以下です。
https://cdnjs.com/libraries/Chart.js

canvasを使うため、CSSは必要無しです。

標準でレスポンシブなので、適当に作ってもOKです。

イメージ的にはポップなチャートという感じでしょうか。

最近あまり触れていなかったのですが、バージョン2からは複数種類のグラフを同チャートに表示できるっぽい?

いずれ実験したいです。

Chartist

MITライセンス、商用利用可です。

Chartist サンプルページ

上記サンプルページでコードを編集しての実験ができるので簡単にいろいろ試せます。

bowerでのインストールが可能。

CDNは以下で、この中からJSとCSSを読み込む必要があります。
https://cdnjs.com/libraries/chartist

グラフの数は15までと、Chart.jsよりかなり少ないです。

これもChart.jsと同様で、レスポンシブかつポップなチャートが描画できます。

個人的にはこちらの方がなんとなく好きです。

jqPlot

jQueryのチャートならこれという超定番。

ライセンスはMIT&GPL。商用利用可です。

jqPlot サンプルページ

CDNは以下ですが、最低限JSとCSSを読み込む必要がある他、もちろんjQuery本体も必須です。
https://cdnjs.com/libraries/jqPlot

プラグインが多いですよね。

プラグインを使えばいろいろ出来ちゃうので、まだまだ理解が必要な点は多いだろうなと思ってます。

ドキュメントも多いので扱いやすいと思います。

標準でレスポンシブではないので、サイズ変更をさせたかったらリサイズ時の「replot()」が必須です。

いろいろ検索&実験しておきたい

というわけで私が好きなチャート系JSをご紹介いたしました。

すごく頻度が高いというわけではないんですが、たまに使うことがあるので、時間を見つけて実験したりもしてます。

ここで挙げたものの他にも「D3.JS」など定番と言えそうなものも多数ありますよね。

実用性もありますし多くのものを探して実験しておきたいな~と思ったりしている今日この頃です。

スポンサードリンク

twitterまたはFacebookでもコメントして頂けます