skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

グラフにトレンドラインも加えた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「jqPlot」サンプル

記事作成：2009年04月06日

前の記事：jQueryで時間をカウントダウンするJavaScript「jCountr」
次の記事：mootoolsでコードをシンタックスハイライトさせるJavaScript「Lighter.js」