ソース
javascript
$(function(){
// 線グラフ(1本)
Morris.Line({
element: 'single',//描画対象のID
data: [
{targetX: '2012', targetY: 100},
{targetX: '2011', targetY: 75},
{targetX: '2010', targetY: 50},
{targetX: '2009', targetY: 75},
{targetX: '2008', targetY: 50},
{targetX: '2007', targetY: 75},
{targetX: '2006', targetY: 100}
], //描画用データ
xkey: 'targetX', //X軸の指定
ykeys: ['targetY'], //Y軸の指定(カンマ区切りで複数設定可能)
labels: ['ラベル'], //プロットのラベル
lineWidth : 2, //線の太さ(ピクセル単位)
pointSize : 2, //ポイントの大きさ(ピクセル単位)
lineColors : ['#ff0000'], //線の色(カンマ区切りで複数設定可能)
ymax : 150, //Y軸の最大値
ymin : 30, //Y軸の最小値
smooth : true, //ラインを滑らかにする
hideHover : true, //プロットにホバーしたときにツールチップを表示させる>ようにするか
});
// 線グラフ(2本)
Morris.Line({
element: 'dubble',//描画対象のID
data: [
{targetX: '2012', targetY1: 100, targetY2: 80},
{targetX: '2011', targetY1: 75, targetY2: 90},
{targetX: '2010', targetY1: 50, targetY2: 100},
{targetX: '2009', targetY1: 75, targetY2: 60},
{targetX: '2008', targetY1: 50, targetY2: 40},
{targetX: '2007', targetY1: 75, targetY2: 70},
{targetX: '2006', targetY1: 100, targetY2: 90}
], //描画用データ
xkey: 'targetX', //X軸の指定
ykeys: ['targetY1','targetY2'], //Y軸の指定(カンマ区切りで複数設定可能)
labels: ['赤い方','緑の方'], //プロットのラベル
lineWidth : 2, //線の太さ(ピクセル単位)
pointSize : 2, //ポイントの大きさ(ピクセル単位)
lineColors : ['#ff0000','#00ff00'], //線の色(カンマ区切りで複数設定可能)
ymax : 150, //Y軸の最大値
ymin : 30, //Y軸の最小値
smooth : true, //ラインを滑らかにする
hideHover : true, //プロットにホバーしたときにツールチップを表示させる>ようにするか
});
});
HTML
<h4 class="index">線グラフ(1本)</h4>
<div id="single">
</div>
<h4 class="index">線グラフ(2本)</h4>
<div id="dubble">
</div>