円グラフの表示方法
jQPlotプラグインで円グラフを表示させた結果を図4に示します。
図4 jQPlotプラグイン適用後（円グラフ表示）
円グラフを表示する際のjQPlotプラグインの使用例をリスト6に示します。
リスト6 円グラフの表示（jQPlot_pie.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.pieRenderer.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(
'pie',
[
[['A',25],['B',94],['C',68],['D',81],['E',34]]
],
{
seriesDefaults:{
renderer:jQuery.jqplot.PieRenderer,
rendererOptions: {
padding: 15,
dataLabels: 'label',
showDataLabels: true
}
},
}
);
});
</script>
<div id="pie" style="height: 350px; width: 350px;"></div>
</body>
</html>
円グラフを表示させる場合もjQPlot専用の機能拡張スクリプトを呼び出す必要があります。3.プラグインの読み込みで「jqplot.pieRenderer.min.js」という機能拡張スクリプトを読み込みます。このスクリプトはjQPlotのzipファイルの「dist」フォルダ内の「plugins」フォルダに入っているので、「jquery.jqplot.min.js」をコピーした「plugins」フォルダに移しておきます。
5.プラグインの設定で設定しているオプションを表3に示します。
| 名前 | 既定値 | 設定値 | 概要 |
| seriesDefaults | - | - |
グラフの種類や系列の色や太さなどの初期設定。 この中でさらにオプションを指定する。 |
| renderer | - | jQuery.jqplot.PieRenderer |
機能拡張スクリプトを呼び出す。 ここでは円グラフを表示するため、 jQuery.jqplot.PieRendererを指定。 |
| rendererOptions | - | - |
機能拡張スクリプトの設定。 この中でさらににオプションを指定する。 |
| padding | - | 15 |
円の周りの余白の大きさを指定。 ここでは15を指定。 |
| dataLabels | - | label |
データラベルに値を表示するか、 ラベル（項目）を表示するか指定。 ここではラベル（項目）を指定。 |
| showDataLabels | false | true |
データラベルを表示するかどうかを指定。 ここでは表示するのでtrueを設定。 |
