多彩なオプションでカスタマイズ
jQuery Visualizeプラグインは多彩なオプションでカスタマイズできます。先述の「type」を含めオプションの例を表1に示します。
| 名前 | 既定値 | 概要 |
| type | bar | グラフの形状を設定（折れ線「line」、棒「bar」、下塗り潰し折れ線「area」、円「pie」） |
| width | - | グラフの幅を設定（「300px」などピクセル値で設定） |
| height | - | グラフの高さを設定（「300px」などピクセル値で設定） |
| colors |
['#be1e2d','#666699','#92d5ea', '#ee8310','#8d10ee','#5a3b16', '#26a4ed','#f45a90','#e9e744'] |
グラフの線・棒・円弧の色を設定 |
| textColors | [] | グラフ内のテキストの色を設定 |
| parseDirection | x | 列項目を横軸にする場合は「x」、行項目を横軸にする場合は「y」を設定 |
| lineWeight | 4 | 折れ線グラフの線の幅を数値で設定 |
| pieMargin | 20 | 円グラフの円と外枠の隙間のスペースを数値で設定 |
| pieLabelPos | inside | 円グラフの数値を円弧の中に表示する場合は「inside」、外に表示する場合は「outside」に設定 |
各種オプションを使った折れ線グラフの表示方法
折れ線グラフで「type」「width」「height」の他、「colors」「parseDireciton」「lineWeight」オプションを設定したjQuery Visualizeプラグイン適用後を図6に示します。
リスト6に折れ線グラフで「type」「width」「height」の他、「colors」「parseDireciton」「lineWeight」オプションを設定したjQuery Visualizeプラグインの使用例を示します。
<!--プラグインの設定-->
$(document).ready(function(){
$('table').visualize({
type:'line',
width:'420px',
height:'300px',
colors:['red','blue','green','yellow'],
parseDirection:'y',
lineWeight:1
});
});
「type」は折れ線グラフなので「'line'」「width」はグラフの横幅「'420px'」「height」はグラフの高さ「'300px'」に設定しています。そして「colors」は線の色を「['red','blue','green','yellow']」、すなわち赤、青、緑、黄に設定しています。parseDirectionは「'y'」に設定したので、リスト1のように列項目の教科ではなく、行項目の人の名前が横軸になっています。「lineWeight」は「1」に設定したので、既定値の4よりも細くなっています。
あとはリスト5のように、HTML側でプラグインの設定をしたファイルを読み込む設定をします。サンプルに格納されている「jQvisualize_other_option.html」は「plugin」フォルダ内の「other_option.js」を読み込む設定になっています。
各種オプションを使った円グラフの表示方法
円グラフで「type」「width」「height」の他、「colors」「textColors」「parseDireciton」「pieMargin」「pieLabelPos」オプションを設定したjQuery Visualizeプラグイン適用後を図7に示します。
リスト7に円グラフで「type」「width」「height」の他、「colors」「textColors」「parseDireciton」「pieMargin」「pieLabelPos」オプションを設定したjQuery Visualizeプラグインの使用例を示します。
<!--プラグインの設定-->
$(document).ready(function(){
$('table').visualize({
type:'pie',
width:'420px',
height:'300px',
colors:['red','blue','green','yellow'],
textColors:['red','blue','green','yellow'],
parseDirection:'y',
pieMargin:5,
pieLabelPos:'outside'
});
});
「type」は円グラフなので「pie」「width」はグラフの横幅「'420px'」「height」はグラフの高さ「'300px'」に設定しています。そして「colors」は円弧の色を「['red','blue','green','yellow']」、すなわち赤、青、緑、黄に設定しています。そして「textColors」は各円弧のデータを表す文字の色を「['red','blue','green','yellow']」、すなわち赤、青、緑、黄に設定しています。parseDirectionは「'y'」に設定したので、行項目の人の名前が横軸になっています。「pieMargin」は「5」に設定したので、既定値の20よりも外枠とグラフとの隙間が狭くなっています。「pieLabelPos」は「outside」に設定したので、図5のように円弧の中ではなく、図7のように円弧の外に数値データが表示されています。
あとはリスト5のように、HTML側でプラグインの設定をしたファイルを読み込む設定をします。サンプルに格納されている「jQvisualize_other_option2.html」は「plugin」フォルダ内の「other_option2.js」を読み込む設定になっています。
まとめ
今回はjQuery Visualizeというグラフ表示のjQueryプラグインによる様々なグラフの表示方法や、各種オプションによる設定方法を紹介しました。HTML5のcanvas要素を使った見栄えの良いさまざまなグラフをとても手軽にjQueryプラグインにより表示できるので、非常に便利です。
サンプルのCSSファイルを今回は使いましたが、それもカスタマイズが可能なので、白基調・黒基調のみならず好きな背景色のグラフを作成が可能になります。テーブル要素を読み込んでグラフを作ってくれるのも手軽です。前回紹介したテーブル操作ができるプラグインと共に活用してみてはいかがでしょうか。
後編ではこの他のグラフ表示のjQueryプラグインを紹介します。
