やりたいこと
簡単にちょっとかっこいいグラフを表示させたいので、morris.jsを使ってみる。
イメージとしては、こんな感じ。
やったこと
1. javascriptとcssの読み込み
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.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="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
morris.jsは、raphaelとjqueryに依存しているため、上記を読み込む。
2. 出力先に、divタグを設置
<div id="chart" style="height: 300px;"></div>
id名と出力するグラフの高さを入力する。
3. グラフの出力内容を記載する
new Morris.Line(
{
element: 'chart',
data: [
{"date":"2016-11-28","lineA":"128","lineB":"226"},
{"date":"2016-11-27","lineA":"128","lineB":"227"},
{"date":"2016-11-26","lineA":"127","lineB":"230"}
],
xkey: 'date',
ykeys: ['lineA','lineB'],
labels: ['LineA','LineB'],
lineWidth : 2,
pointSize : 3,
ymax : 230,
ymin : 123,
smooth : true,
hideHover : true,
}
);
上記を記載するだけで、グラフを描画することが可能。
1ページ内に複数グラフを描画させたい場合は、2のdivタグのID名を変えて、
elementの値をID名に合わせて、追記してあげれば複数のグラフを表示することができる
出力結果を確認
その他ポイント
1つのグラフの中に、複数の線を表示させたい
ykeysとlabelsを増やすことで、複数線を表示させることができる
グラフの線を太くしたい
lineWidthとpoinSizeの値を変えることで、線の太さ、値のポイントのサイズを変更することができる
Y軸の高さを固定したい
ymaxとyminを設定することで、Y軸の最大値とY軸の最小値を設定することができる
線を滑らかにしたい
smoothを入れることで、滑らかな曲線で表現することができる
結果
グラフを書くには、オススメかも。
使い方もとても簡単でした。