日付ごとに折れ線グラフを表示するにはどうすればいいだろうか?
下のように組んだら、日付別に表示できた。
<!--[if lt IE 9]><script src="//cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/excanvas.min.js"></script><![endif]-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="./jquery.jqplot.min.js"></script>
<script src="./jqplot.dateAxisRenderer.min.js"></script>
<script>
jQuery(function($){
$.jqplot('chartdiv',
[
[
['2014/08/01', 2],
['2014/08/02',5.12],
['2014/08/03',13.1],
['2014/08/04',13.1],
['2014/08/05',13.1],
['2014/08/06',13.1],
['2014/08/07',13.1],
['2014/08/08',13.1],
['2014/08/09',13.1],
['2014/08/10',13.1],
['2014/08/11',13.1],
['2014/08/12',13.1],
['2014/08/13',13.1],
['2014/08/14',13.1],
['2014/08/15',13.1],
['2014/08/16',13.1],
['2014/08/17',13.1],
['2014/08/18',13.1],
['2014/08/19',13.1],
['2014/08/20',13.1],
['2014/08/21',13.1],
['2014/08/22',13.1],
['2014/08/23',13.1],
['2014/08/24',13.1],
['2014/08/25',13.1],
['2014/08/26',13.1],
['2014/08/27',13.1],
['2014/08/28',13.1],
['2014/08/29',19.1],
['2014/08/30',0],
['2014/08/31',0]
]
],
{
axes:{
xaxis:{
renderer:jQuery.jqplot.DateAxisRenderer,
min:'2014/08/01',
max:'2014/08/31',
tickOptions:{
formatString: '%#d日',
},
tickInterval: '1 days'
},
yaxis:{
min:0,
}
},
}
);
});
</script>
<div id="chartdiv" style="height:500px;width:1000px; "></div>1日ごとに、gridを描いてグラフを表示させています。{
axes:{
xaxis:{
min:'2014/08/01',
max:'2014/08/31',
},
yaxis:{
min:0,
max:200
}
},
}とすることで、軸上の最大値と最小値を設定することができる。これは便利だなー。
0 コメント:
コメントを投稿