Web制作に限らずグラフって重要なものだと思います。数年前から「ビッグデータ」という言葉もよく目にしますし。
というわけで、JavaScriptまたはjQueryでチャート描画系のライブラリを挙げてみたいと思います。
Highcharts
商用有料です。
実際のサイト制作で使ったことはないんですが、いずれ使う場面もあるかと思い実験はいろいろしました。
かなり高機能です。もっと時間を使って実験したい。
金額については、問い合わせなどしていないので正確には判りませんが、一番安くて「USD 410.00」(2017年5月現在)だそうな。結構高いです。
amCharts
こちらも商用有料。
Highchartsと同程度(当社比)に高機能。
こちらは1サイトで「$140」(2017年5月現在)。Highchartsよりかなり安いですね。
また、Highchartsも同様ですが、株価表示に特化したバージョンもあります。
Chart.js
フリーで商用利用可のチャート系JSとしてはかなり有名ですね。
上記サンプルページでは、簡単にデータを追加、削除などができていろいろなパターンを確認できます。
npmおよびbowerでのインストールが可能。
CDNは以下です。
https://cdnjs.com/libraries/Chart.js
canvasを使うため、CSSは必要無しです。
標準でレスポンシブなので、適当に作ってもOKです。
イメージ的にはポップなチャートという感じでしょうか。
最近あまり触れていなかったのですが、バージョン2からは複数種類のグラフを同チャートに表示できるっぽい?
いずれ実験したいです。
Chartist
MITライセンス、商用利用可です。
上記サンプルページでコードを編集しての実験ができるので簡単にいろいろ試せます。
bowerでのインストールが可能。
CDNは以下で、この中からJSとCSSを読み込む必要があります。
https://cdnjs.com/libraries/chartist
グラフの数は15までと、Chart.jsよりかなり少ないです。
これもChart.jsと同様で、レスポンシブかつポップなチャートが描画できます。
個人的にはこちらの方がなんとなく好きです。
jqPlot
jQueryのチャートならこれという超定番。
ライセンスはMIT&GPL。商用利用可です。
CDNは以下ですが、最低限JSとCSSを読み込む必要がある他、もちろんjQuery本体も必須です。
https://cdnjs.com/libraries/jqPlot
プラグインが多いですよね。
プラグインを使えばいろいろ出来ちゃうので、まだまだ理解が必要な点は多いだろうなと思ってます。
ドキュメントも多いので扱いやすいと思います。
標準でレスポンシブではないので、サイズ変更をさせたかったらリサイズ時の「replot()」が必須です。
いろいろ検索&実験しておきたい
というわけで私が好きなチャート系JSをご紹介いたしました。
すごく頻度が高いというわけではないんですが、たまに使うことがあるので、時間を見つけて実験したりもしてます。
ここで挙げたものの他にも「D3.JS」など定番と言えそうなものも多数ありますよね。
実用性もありますし多くのものを探して実験しておきたいな~と思ったりしている今日この頃です。