棒グラフの表示方法
jQPlotプラグインで棒グラフを表示させた結果を図3に示します。
![図3 jQPlotプラグイン適用後(棒グラフ表示)](http://cz-cdn.shoeisha.jp/static/images/article/6873/6873_03_s.gif)
棒グラフを表示する際のjQPlotプラグインの使用例をリスト5に示します。
<!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オプションの中で、機能拡張スクリプトを呼び出します。