JavaScriptで簡単に綺麗なグラフを描ける「morris.js」

「morris.js」は簡単に綺麗なグラフを描くことが出来る、JavaScriptライブラリです。

morris.js

screenshot230

「morris.js」は2012年にリリースされ話題になりました。その後、描けるグラフやオプションの種類が増加、バグFIXなどのUpdateがあり現在に至ります。本記事執筆現在、どのようなグラフが描けるのかご紹介します。

 

折れ線グラフです。各ポイントへhoverすると、詳細を表示することができます。

screenshot231

棒グラフです。こちらもhoverで詳細表示。

screenshot232

エリアグラフです。

screenshot234

円グラフです。hoverでアニメーションします。

screenshot235

 

「morris.js」の実装方法をご紹介します。まずはjQuery含む4つの外部ファイルを読み込みます。

<link rel="stylesheet" href="//cdn.oesmith.co.uk/morris-0.4.3.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="//cdn.oesmith.co.uk/morris-0.4.3.min.js"></script>

 

HTMLはグラフを描画したい箇所に以下のようにマークアップします。

<div id="myfirstchart" style="width: 500px; height: 250px;"></div>

 

JavaScriptは以下のようにコーディングします。コメントを参考にしてください。

new Morris.Line({
  element: 'myfirstchart', //divのidを指定
  data: [  //JSONでデータを与える
    { year: '2008', value: 20 },
    { year: '2009', value: 10 },
    { year: '2010', value: 5 },
    { year: '2011', value: 5 },
    { year: '2012', value: 20 }
  ],
  xkey: 'year',  //横軸のkeyを指定
  ykeys: ['value'],  //縦軸のkeyを指定
  labels: ['Value']  //hover時の表示
});

 

するとこのようなシンプルな折れ線グラフを作ることが出来ました。簡単です。

screenshot236

その他のグラフの実装方法はJSBINで公開されています。上記リンク先からたどることができます。

 

グラフといえばGoogle Chartsが有名ですが、いかにもなデザイン
になってしまいますね。「morris.js」のようなライブラリを使って、他のサイトと差をつけていきたいです。

 

Home > JavaScript > JavaScriptで簡単に綺麗なグラフを描ける「morris.js」

Return to page top