棒グラフの表示方法
jQPlotプラグインで棒グラフを表示させた結果を図3に示します。
図3 jQPlotプラグイン適用後（棒グラフ表示）
棒グラフを表示する際のjQPlotプラグインの使用例をリスト5に示します。
リスト5 棒グラフの表示（jQPlot_bar.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>
<script language="javascript" type="text/javascript" src="./plugins/jqplot.barRenderer.min.js"></script>
<script language="javascript" type="text/javascript" src="./plugins/jqplot.categoryAxisRenderer.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(){
jQuery.jqplot(
'bar',
[
[['A',25],['B',94],['C',68],['D',81],['E',34]]
],
{
seriesDefaults:{
renderer:jQuery.jqplot.BarRenderer,
},
axes:{
xaxis:{
renderer:jQuery.jqplot.CategoryAxisRenderer,
}
}
}
);
});
</script>
<div id="bar" style="height: 350px; width: 350px;"></div>
</body>
</html>
棒グラフを表示させるためには、jQPlot専用の機能拡張スクリプトを呼び出す必要があります。3.プラグインの読み込みで「jqplot.barRenderer.min.js」と「jqplot.categoryAxisRenderer.min.js」という機能拡張スクリプトを読み込みます。このスクリプトはjQPlotのzipファイルの「dist」フォルダ内の「plugins」フォルダに入っているので、「jquery.jqplot.min.js」をコピーした「plugins」フォルダに移しておきます。
5.プラグインの設定では[]内のデータの指定部分で横軸に設定したい文字列を「''」で囲んで設定します。指定しているオプションは表2に示します。
| 名前 | 既定値 | 設定値 | 概要 |
| seriesDefaults | - |
- |
グラフの種類や系列の色や太さなどの初期設定。 この中でさらにオプションを指定する。 |
| renderer | - | jQuery.jqplot.BarRenderer |
機能拡張スクリプトを呼び出す。 ここでは棒グラフを表示するため、jQuery.jqplot.BarRendererを指定。 |
| axes | - | - |
軸に関する初期設定。 この中でさらににオプションを指定する。 |
| xaxis | - | - |
横軸に関する初期設定。 この中でさらにオプションを指定する。 |
| renderer | - | jQuery.jqplot.CategoryAxisRenderer |
機能拡張スクリプトを呼び出す。 ここでは横軸の要素に文字列を設定するため、jQuery.jqplot.CategoryAxisRendererを指定。 |
rendererオプションの中で、機能拡張スクリプトを呼び出します。
