オプションと機能拡張を用いてさまざまな種類のグラフを描く
jQPlotプラグインも前回紹介したjQuery Visualize同様、下を塗りつぶした折れ線グラフ（以下面グラフ）、棒グラフや円グラフの表示が可能です。さまざまな種類のグラフを描くには、オプションを設定したり、jQPlot専用の機能拡張スクリプトを用いたりします。
面グラフの表示方法
面グラフを表示させたjQPlotプラグイン適用後を図2に示します。
図2 jQPlotプラグイン適用後（面グラフ表示）
面グラフを表示させるためには、「jQuery.jqplot();」の中でデータを指定する[]の後ろに{}というオプションを指定する部分を設けて、いくつかのオプションを指定します。
面グラフを表示する際のjQPlotプラグインの使用例をリスト2に示します。
リスト2 面グラフの表示（jQPlot_area.html）
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8" />
<title>jQueryプラグイン（jQPlot) 面グラフサンプル</title>
<!--1.jQueryの読み込み-->
<script language="javascript" type="text/javascript" src="./Scripts/jquery-1.8.1.min.js"></script>
<!--2.IE9以前のバージョンへの対応-->
<!--[if lt IE 9]>
<script language="javascript" type="text/javascript" src="./plugins/excanvas.min.js"></script>
<![endif]-->
<!--3.プラグインの読み込み-->
<script language="javascript" type="text/javascript" src="./plugins/jquery.jqplot.min.js"></script>
<!--4.CSSの読み込み-->
<link rel="stylesheet" type="text/css" href="./css/jquery.jqplot.min.css" />
</head>
<body>
<h1>jQueryプラグイン（jQPlot）面グラフサンプル</h1>
<!--5.プラグインの設定-->
<script>
jQuery(function(){
var A = [[1,25],[2,94],[3,68],[4,81],[5,34],[6,77]];
var B = [[1,12],[2,35],[3,53],[4,37],[5,75],[6,19]];
jQuery.jqplot(
'area',
[
A,B
],
{
showMarker:false,
seriesDefaults:{
fill:true
},
axes:{
xaxis:{
pad:0
}
},
}
);
});
</script>
<div id="area" style="height: 350px; width: 350px;"></div>
</body>
</html>
1～4のheadタグ内の記述はリスト1の折れ線グラフの時と同じです。「5.プラグインの設定」では「jQuery.jqplot();」の前に以下のリスト3のような構文でデータを折れ線データを記述します。
リスト3 複数の折れ線データの記述
var 変数の名前 = [[横軸の値,縦軸の値],...]; var 変数の名前 = [[横軸の値,縦軸の値],...]; ...
「jQuery.jqplot();」の中の[]内で事前に設定した変数で折れ線データを指定します。そして、その後の{}内はオプションの設定エリアとなります。jQPlotプラグインの基本的な使用方法を以下のリスト4に示します。
リスト4 jQPlotプラグインの基本的な使用方法
jQuery(function(){
jQuery.jqplot(
'<!--適宜文字列をIDとして指定-->',
[
<!--データを指定-->
],
{
<!--オプションを指定-->
オプション名:値,
オプション名:{
オプション名:値
},
}
);
});
以上のようにオプションの中にさらにオプションを指定することもできます。
リスト2で指定しているオプションを表1に示します。
| 名前 | 既定値 | 設定値 | 概要 |
| showMarker | true | false |
折れ線の点（マーカー）を見せるか見せないかを指定。 ここでは見せないのでfalseを設定。 |
| seriesDefaults | - |
- |
グラフの種類や系列の色や太さなどの初期設定。 この中でさらにオプションを指定する。 |
| fill | false | true |
折れ線の下を塗りつぶすか塗りつぶさないかを指定。 ここでは塗りつぶすのでtrueを設定。 |
| axes | - | - | 軸に関する初期設定。この中でさらにオプションを指定する。 |
| xaxis | - | - | 横軸に関する初期設定。この中でさらにオプションを指定する。 |
| pad | - | 0 | 横軸上の余白を設定。ここでは0を設定して余白をなくす。 |
あとはdivタグでグラフの高さと幅を指定すれば、面グラフを表示できます。
