Morris.jsはjQueryを使ったSVG描画型のグラフライブラリです。

Webブラウザ上でグラフを描画しようと思ったら従来はサーバサイドの仕組みかFlashを使うのが一般的でした。しかし今後はJavaScriptが便利です。Morris.jsはjQueryを使ったグラフライブラリです。


二つのデータがある折れ線グラフ。


棒グラフ。


エリアグラフ。


パイチャート。

今のところ対応しているのは折れ線、棒、エリア、ドーナッツチャートになっています。それぞれ豊富なオプションが用意されています。また、マウスオーバーで値をフローティング表示してくれるのも便利です。データはJavaScriptで与えますが、グラフはSVGで出力される仕組みになっています。

Morris.jsはjQuery/JavaScript製、BSD Licenseのオープンソース・ソフトウェアです。

MOONGIFTはこう見る

グラフをサーバサイドで処理する場合、画像を出力するために追加のライブラリやコーディングが必要になります。しかしグラフというのは色を含めて細かなカスタマイズをしたいと願われるものなので、都度サーバサイドの修正を行うのは現実的ではありません。

Flashを使うのはこれまで一般的でしたが、問題はやはりスマートフォンの対応になるでしょう。とは言えHTML5に特化してしまうのはレガシーなWebブラウザの切り捨てになります。レガシーとモダン、双方に対応したグラフライブラリこそがニーズをつかみ取れるでしょう。

Morris.js

oesmith/morris.js