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