Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

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

「jQuery プラグイン」の利用(11)

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2012/08/30 14:00

 本連載では、JavaScriptライブラリの中でも人気が高まりつつあるjQuery UIとjQueryプラグインをサンプルを交えて紹介していきます。今回は、グラフ表示をテーマにしたjQueryプラグインを紹介します。

目次

はじめに

 今回は、簡単に綺麗なグラフを表示できる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に示します。

図1 jQuery Visualizeプラグイン適用後(折れ線グラフ表示)
図1 jQuery Visualizeプラグイン適用後(折れ線グラフ表示)

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に示します。

リスト1 折れ線グラフの表示(jQvisualize_line.html)
<!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に示します。

リスト2 プラグインの設定ファイル(折れ線グラフ表示)(line.js)
<!--プラグインの設定-->
$(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に示します。

図2 jQuery Visualizeプラグイン適用後(折れ線グラフ表示・白基調背景)
図2 jQuery Visualizeプラグイン適用後(折れ線グラフ表示・白基調背景)

 白基調背景を使うには、リスト1のスクリプトの「enhance({});」内の「loadStyle:[]」部分で呼び出すCSSファイルを「./css/visualize-light.css」に変更するだけです。変更例をリスト3に示します

リスト3 (折れ線グラフ表示・白基調背景)(jQvisualize_line2.htmlの一部)
<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」と同じです。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • WINGSプロジェクト 小林 健志(コバヤシ タケシ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

バックナンバー

連載:jQuery UI/プラグインの活用

もっと読む

All contents copyright © 2005-2018 Shoeisha Co., Ltd. All rights reserved. ver.1.5