はじめに
今回は、簡単に綺麗なグラフを表示できるjQueryプラグイン「jQuery Visualize」を解説します。HTML5のcanvas要素を使って見栄えの良いグラフを描画するプラグインで、折れ線グラフ・棒グラフ・円グラフなど多くの種類のグラフを描くことができます。また、豊富なオプションにより、大きさや色などを自在に変化させることができ、好みのデザインで表示させることができます。
対象読者
- jQueryプラグインに興味があり、使ってみたい方
必要な環境と準備
執筆時点のjQueryの最新版は、1.7.2です。第1回を参考に、ダウンロードしてください。また、jQueryプラグインの基本的な使い方は、第3回を参照してください。
サンプルでは、htmlファイルと同じ階層に「plugins」というフォルダを作成し、使用するプラグイン関連のファイルはここにまとめて配置し、説明を進めます。また、「Scripts」フォルダにはjQuery本体を配置しておきます。なお、今回紹介する「jQuery Visualize」は「css」フォルダにcssファイルを、「images」フォルダに「jQuery Visualize」で使用する画像データを配置しています。
jQuery Visualizeプラグインを使って折れ線グラフを表示
jQuery Visualizeプラグインは、HTML5のcanvas要素を呼び出して、見栄えの良いグラフをHTML表示できるプラグインです。このプラグインはテーブルを読み込んで、グラフを作成します。まずはシンプルな折れ線グラフを表示させた状態を図1に示します。
jQuery Visualizeプラグインの使い方
使用方法は、jQuery Visualizeプラグインのダウンロードサイト上の「ZIP」アイコンをクリックし、zipファイルをダウンロードして保存し、解凍します。解凍したフォルダ内の「js」フォルダからプラグイン本体の「visualize.jQuery.js」とHTML5のcanvas要素を呼び出す「excanvas.js」を「plugins」フォルダ下に配置します。また、解凍したフォルダ内の「css」フォルダと「images」フォルダをそのままコピーして使用します。
さらにHTML5のcanvas要素をInternet Explorer（以下IE）上で使用できるようにするため、「enhance.js」というJavascriptファイルが必要になります（IE6以降に対応）。enhance.jsのダウンロードサイトからzipファイルをダウンロードして保存し解凍します。解凍したフォルダ内にある「enhance.js」を「plugin」フォルダ下に配置します。
jQuery Visualizeプラグインの使用例をリスト1に示します。
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8" />
<title>jQueryプラグイン（jQuery Visualize) サンプル</title>
<!--1.CSSの読み込み-->
<link href="./css/basic.css" type="text/css" rel="stylesheet" />
<!--2.プラグインの読み込み-->
<script type="text/javascript" src="./plugins/enhance.js"></script>
<script type="text/javascript">
enhance({
loadScripts: [
{src: './plugins/excanvas.js', iecondition: 'all'},
'./Scripts/jquery-1.7.2.min.js',
'./plugins/visualize.jQuery.js',
'./plugins/line.js'
],
loadStyles: [
'./css/visualize.css',
'./css/visualize-dark.css'
]
});
</script>
<style type="text/css">
table { float: left; margin: 140px 40px 0 0; }
.visualize { float: left; }
</style>
</head>
<body>
<h1>jQueryプラグイン（jQuery Visualize) サンプル</h1>
<table>
<caption>テストの点数</caption>
<thead>
<tr>
<td></td>
<th scope="col">国語</th>
<th scope="col">算数</th>
<th scope="col">理科</th>
<th scope="col">社会</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">太郎</th>
<td>76</td>
<td>58</td>
<td>98</td>
<td>43</td>
</tr>
<tr>
<th scope="row">次郎</th>
<td>27</td>
<td>15</td>
<td>40</td>
<td>90</td>
</tr>
<tr>
<th scope="row">三郎</th>
<td>100</td>
<td>78</td>
<td>65</td>
<td>80</td>
</tr>
<tr>
<th scope="row">四郎</th>
<td>55</td>
<td>97</td>
<td>76</td>
<td>59</td>
</tr>
</tbody>
</table>
</body>
</html>
「2.プラグインの呼び出し」では、まずIEでHTML5のcanvas要素を使用できるようにする「enhance.js」を呼び出します。その後canvas要素をIE6以降の全てのバージョンで使用できるようにするため、enhance関数を用います。「enhance({});」の「{}」の中に「loadscripts:[]」と記載し、「[]」の中でJavascriptファイルを呼び出していきます。最初に「excanvas.js」を呼び出して、canvas要素が使用できるようにします。「iecondition: 'all'」は全てのIEバージョンで使用できるようにするための設定値です。今回はHTML5の連載ではないので、詳細は省略します。
その後「Scripts」フォルダ内のjQuery本体「jquery-1.7.2.min.js」を呼び出して、次に「plugin」フォルダ内のjQueryプラグイン「visualize.jQuery.js」を呼び出します。最後に呼び出している「plugin」フォルダ内の「line.js」の中でプラグインの設定を行います。「line.js」のサンプルデータをリスト2に示します。
<!--プラグインの設定-->
$(document).ready(function(){
$('table').visualize({
type:'line',
width:'420px',
height:'300px'
});
});
「$(document).ready(function(){});」の中でjQueryメソッドとしてjQuery Visualizeプラグインを機能させます。セレクター部分に「'table'」といった形でテーブル要素を指定します。bodyタグ内のtableタグのテーブル要素がグラフ化されます。また、テーブル要素は、既定値では列項目が横軸となります。従って、このサンプルのテーブルでは列項目の「国語、算数、理科、社会」が横軸に入ることになります。行項目を横軸にしたい場合は後述のオプションで変えることができます。
そして、メソッド部分に「visualize」を設定しています。そしてオプションを設定する部分は「type」はグラフのタイプを指定するオプションで、ここでは折れ線グラフを表示したいので「type:'line'」と指定します。そして、グラフの幅を420ピクセルに指定するため「width:'420px'」、グラフの高さを300ピクセルに指定するため「height:'300px'」と指定します。
再び元のスクリプト「jQvisualize_line.html」の「enhance({});」の中身を見て行くと、「loadStyles:[]」で、プラグインで用いるcssファイルを呼び出します。「enhance({});」の後のstyleタグは表を左、グラフを右に表示するためのものです。bodyタグ内ではtableタグを使ってテーブルデータを設定しています。このテーブル要素がjQuery Visualizeプラグインに読み込まれて、グラフが表示されます。
折れ線グラフ表示と、白基調背景への変更
jQuery VisualizeプラグインのCSSフォルダ内にあり、リスト2で呼び出されている「visualize-dark.css」は黒を基調としたグラフの背景です。もう一つ「visualize-light.css」というCSSファイルが用意されていて、こちらは白を基調としたグラフの背景です。「visualize-light.css」を使ってグラフを表示させたところを図2に示します。
白基調背景を使うには、リスト1のスクリプトの「enhance({});」内の「loadStyle:[]」部分で呼び出すCSSファイルを「./css/visualize-light.css」に変更するだけです。変更例をリスト3に示します
<script type="text/javascript">
enhance({
loadScripts: [
{src: './plugins/excanvas.js', iecondition: 'all'},
'./Scripts/jquery-1.7.2.min.js',
'./plugins/visualize.jQuery.js',
'./plugins/line.js'
],
loadStyles: [
'./css/visualize.css',
'./css/visualize-light.css'
]
});
</script>
「jQvisualize_line2.html」はこの部分以外「jQvisualize_line.html」と同じです。
