グラフにトレンドラインも加えたJavaScript「jqPlot」

JavaScriptでグラフを作成する手法はいくつか紹介しました。例）JavaScriptでグラフを作成するサンプル
jqPlotは、グラフに加えトレンドラインも自動で表示させてくれます。

使用方法

jqPlotからjquery.jqplot.js、jqplot.trendLines.js、excanvas.jsをjQueryからjquery.jsをダウロードします。


<!--[if IE]><script language="javascript" type="text/javascript" src="excanvas.js"></script><![endif]-->
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script language="javascript" type="text/javascript" src="jquery.jqplot.js"></script>
<script language="javascript" type="text/javascript" src="jqplot.trendLines.js"></script>
<script language="javascript">
$(document).ready(function(){
  chart = $.jqplot('id名', 
	[[[1,1],[2,4],[3,5],[4,1],[5,4],[6,8],[7,1],[8,10]]], //グラフの数値[x,y]
         {
         title:'タイトル', //
        legend:{background:'#fffdf6', fontSize:'0.8em', fontFamily:'Arial', location:'nw', rowSpacing:'0.2em'}, //legendの書式
        grid:{borderShadow:true}, //グリッド表示
	axesDefaults:{ticks:{fontSize:'0.75em'} //数値の書式
	}, 
        series:[{trendLines:{show:true, label:'ライン1のトレンドライン'}, label:'ライン1'}] //legendの項目名
	});
});
</script>

上記を記述したら、指定したid名を表示させたい場所に書き込めば完成です。


<div id="id名" style="height:360px;width:540px;"></div>

サンプル

Javascriptサンプルページ一覧

skuare.net