Canvasを使って描くグラフライブラリ「Aristochart」
AristochartはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。
Webブラウザ上で表示されるグラフというと最近ではJavaScriptを使って描画されるものが多くなっています。多くはSVGなどを使っているようですが今回はCanvasを使って奇麗なグラフを描くAristochartを紹介します。
[](http://images.moongift.jp/2013/06/Screenshot 2013-06-25 11.35.30.1372224377.png)
トップページ。これら全てのグラフがAristochartによって描かれています。
[](http://images.moongift.jp/2013/06/Screenshot 2013-06-25 11.35.58.1372224382.png)
指定方法。データを渡すだけで描画されます。
[](http://images.moongift.jp/2013/06/Screenshot 2013-06-25 11.36.21.1372224386.png)
グラフのタイトルをつけるパターン。しかし見た限りではタイトルは表示されていないようです。
[](http://images.moongift.jp/2013/06/Screenshot 2013-06-25 11.36.32.1372224390.png)
こういった細かいグラフはCanvasで描くと奇麗です。
[](http://images.moongift.jp/2013/06/Screenshot 2013-06-25 11.36.43.1372224394.png)
負の値を扱うこともできます。
[](http://images.moongift.jp/2013/06/Screenshot 2013-06-25 11.36.51.1372224398.png)
無数のデータが交差しているグラフ。
[](http://images.moongift.jp/2013/06/Screenshot 2013-06-25 11.37.23.1372224403.png)
テーマ機能もあります。こちらはオレンジ。
[](http://images.moongift.jp/2013/06/Screenshot 2013-06-25 11.37.27.1372224408.png)
こちらはドット。描き方は柔軟に変更できます。
Canvasで描かれるため、マウスオーバーなどで情報を追記したり、データを変更したりすることはできません。また、今のところ折れ線グラフのみとなっているようです（ドットは消すこともできます）。なおCanvasとしてそのまま描くことも、画像に変換して描くこともできます。その場合はダウンロードもできるのがメリットです。
MOONGIFTはこう見る
グラフと言えば初期の頃はサーバで画像に変換して描くものが多く、ついでFlashで作成されてきました。JavaScriptになることでデータがJSONになり、データをアップデートすればその場で描画を変更できるようになりました。さらにサーバサイドの負荷も殆どなく使えるのが大きなメリットです。
利用者にとってもデータを数値で見るよりもグラフで見た方が全体のトレンドが掴みやすく、分かりやすいのがメリットです。テーブルでデータを並べているような所はグラフ化するとユーザの満足度に向上する可能性があります。ぜひ検討しましょう。