jqPlotの基本
準備ができたら、さっそくjqPlotでグラフを描いてみましょう。手順は次のとおりです。
1.JavaScript／スタイルシートの組み込み
グラフを描きたいHTMLファイルに以下のタグを追加して、JavaScriptとスタイルシートを読み込ませます。
<link rel="stylesheet" type="text/css" href="http://アップロード先/jquery.jqplotmin.css" />
<!--[if IE]><script language="javascript" type="text/javascript" src="http://アップロード先/excanvas.min.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="http://アップロード先/jquery-1.3.2.min.js"></script>
<script language="javascript" type="text/javascript" src="http://アップロード先/jquery.jqplot.min.js"></script>
2．div要素の追加
HTML内のグラフを表示したい位置に、div要素を追加します。div要素にはid属性を指定し、style属性でグラフの幅とサイズを指定します。
<div id="要素のID" style="width : 幅; height : 高さ;"></div>
3．グラフの描画
グラフを描画するため、HTMLに以下のようなJavaScriptを追加します。
$(document).ready(function() {
var 配列1 = [ 値1-1, 値1-2, ……, 値1-n ];
var 配列2 = [ 値2-1, 値2-2, ……, 値2-n ];
……
var 配列m = [ 値m-1, 値m-2, ……, 値m-n ];
$.jqplot('div要素のID', [ 配列1, 配列2, ……, 配列m ]);
});
配列1～配列mに、グラフの個々の系列の値を入れます。サンプルとして、ID名が「jq」のdiv要素に、次の表のような2つの系列を表すグラフを描画したいときのスクリプトを以下に示します。
| 系列 | 値 |
|---|---|
| 系列1 | 5, 7, 6, 8, 7 |
| 系列2 | 7, 5, 7, 6, 9 |
$(document).ready(function() {
var s1 = [ 5, 7, 6, 8, 7 ];
var s2 = [ 7, 5, 7, 6, 9 ];
$.jqplot('jq', [ s1, s2 ]);
});
このスクリプトを実行したところが、次の画面です。筆者のWebサイト（http://www.h-fj.com/ascii/jqplot/sample1.html）に実際に動作するサンプルを公開していますので、ソースコードの全文はこのページを開いて参照してください。
サンプルの実行結果
