グラフを表示するjQueryプラグイン 後編

「jQuery プラグイン」の利用（12）

バブルチャートグラフの表示方法

　jQPlotプラグインでバブルチャートグラフを表示させた結果を図6に示します。バブルチャートグラフは二次元の散布図グラフの点にさらにもう一つ数値データを与えて、円の大きさで数値を表す三次元のグラフです。

図6　jQPlotプラグイン適用後（バブルチャートグラフ表示）

　バブルチャートグラフを表示する際のjQPlotプラグインの使用例をリスト8に示します。

リスト8　バブルチャートグラフの表示（jQPlot_bubble.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.bubbleRenderer.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(
        'bubble',
        [
            [[32,68,55,'A'],[45,25,69,'B'],[41,77,44,'C'],[54,33,50,'D']]
        ],
	{
	    seriesDefaults:{
		renderer:jQuery.jqplot.BubbleRenderer
	    },
	}
    );
});
</script>

<div id="bubble" style="height: 350px; width: 350px;"></div>

</body>
</html>

　バブルチャートグラフを表示させる場合もjQPlot専用の機能拡張スクリプトを呼び出す必要があります。3.プラグインの読み込みで「jqplot.bubbleRenderer.min.js」という機能拡張スクリプトを読み込みます。このスクリプトはjQPlotのzipファイルの「dist」フォルダ内の「plugins」フォルダに入っているので、「jquery.jqplot.min.js」をコピーした「plugins」フォルダに移しておきます。

　5.プラグインの設定ではデータ設定部分[]の中では、数値を3つ与える必要があります。[横軸の値,縦軸の値,円の大きさの値,'ラベル']という形で記述します。そして設定しているオプションを表5に示します。

表5　リスト8（jQPlot_bubble.html）で指定しているオプション

名前	既定値	設定値	概要
seriesDefaults	-	-	グラフの種類や系列の色や太さなどの初期設定。 この中でさらにオプションを指定する。
renderer	-	jQuery.jqplot.BubbleRenderer	機能拡張スクリプトを呼び出す。 ここではバブルチャートグラフを表示するため、 jQuery.jqplot.BubbleRendererを指定。

　ここに紹介した2つ以外のjQPlotで対応している代表的なグラフを表6に示します。

表6　jQPlotで対応している代表的なグラフ

グラフの種類	概要
縦棒グラフ	縦軸から伸びる棒グラフ
ウォーターフォールチャートグラフ	棒グラフのような形だが、下が切れているデータもあり、 縦軸でデータの幅を示せる
散布図	バブルチャートグラフと違って2次元データ
マリメッコチャートグラフ	占有率などを表す面グラフ
トレンドライン（回帰曲線）入り折れ線グラフ	折れ線グラフに回帰曲線を入れられる
ローソク足グラフ	太線と細線で構成されたウォーターフォールチャート
ピラミッドグラフ	人口分布などを示せるグラフ

　jQPlotプラグインのzipファイルha内の「dist」フォルダにある「examples」フォルダには多数のサンプルデータが入っていて、「plugins」には多数の機能拡張スクリプトが入っていますので、サンプルを参考にすると良いでしょう。

まとめ

　今回はjQPlotというグラフ表示のjQueryプラグインによる多彩なグラフの書き方を紹介しました。このプラグインはデータを記述する領域とオプションを記述する領域がスッキリと分かれていて、書式がしっかりと決まっています。読み込む機能拡張スクリプトをさまざまに変化させることによってさまざまなグラフを表示できるので、表示させるグラフを変える際には、読み込む機能拡張スクリプトを変えてオプションを少々書き換えるだけで済みますから非常に使い勝手が良いです。このプラグインもHTML5のcanvas要素を用いているので、見栄えも良いです。ぜひ活用してみてはいかがでしょうか。

参考資料

• jQPlot