CodeZine(コードジン)

特集ページ一覧

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

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

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

オプションと機能拡張を用いてさまざまな種類のグラフを描く

 jQPlotプラグインも前回紹介したjQuery Visualize同様、下を塗りつぶした折れ線グラフ(以下面グラフ)、棒グラフや円グラフの表示が可能です。さまざまな種類のグラフを描くには、オプションを設定したり、jQPlot専用の機能拡張スクリプトを用いたりします。

面グラフの表示方法

 面グラフを表示させたjQPlotプラグイン適用後を図2に示します。

図2 jQPlotプラグイン適用後(面グラフ表示)
図2 jQPlotプラグイン適用後(面グラフ表示)

 面グラフを表示させるためには、「jQuery.jqplot();」の中でデータを指定する[]の後ろに{}というオプションを指定する部分を設けて、いくつかのオプションを指定します。

 面グラフを表示する際のjQPlotプラグインの使用例をリスト2に示します。

リスト2 面グラフの表示(jQPlot_area.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>

<!--4.CSSの読み込み-->
<link rel="stylesheet" type="text/css" href="./css/jquery.jqplot.min.css" />

</head>

<body>
<h1>jQueryプラグイン(jQPlot)面グラフサンプル</h1>

<!--5.プラグインの設定-->
<script>
jQuery(function(){
    var A = [[1,25],[2,94],[3,68],[4,81],[5,34],[6,77]];
    var B = [[1,12],[2,35],[3,53],[4,37],[5,75],[6,19]];
    jQuery.jqplot(
        'area',
        [
            A,B
        ],
	{
            showMarker:false,
	    seriesDefaults:{
		fill:true
	    },
            axes:{
                xaxis:{
                    pad:0
                }
            },
	}
    );
});
</script>

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

</body>
</html>

 1~4のheadタグ内の記述はリスト1の折れ線グラフの時と同じです。「5.プラグインの設定」では「jQuery.jqplot();」の前に以下のリスト3のような構文でデータを折れ線データを記述します。

リスト3 複数の折れ線データの記述
var 変数の名前 = [[横軸の値,縦軸の値],...];
var 変数の名前 = [[横軸の値,縦軸の値],...];
...

 「jQuery.jqplot();」の中の[]内で事前に設定した変数で折れ線データを指定します。そして、その後の{}内はオプションの設定エリアとなります。jQPlotプラグインの基本的な使用方法を以下のリスト4に示します。

リスト4 jQPlotプラグインの基本的な使用方法
jQuery(function(){
    jQuery.jqplot(
        '<!--適宜文字列をIDとして指定-->',
        [
            <!--データを指定-->
        ],
	{
            <!--オプションを指定-->
            オプション名:値,
	    オプション名:{
		オプション名:値
	    },
	}
    );
});

 以上のようにオプションの中にさらにオプションを指定することもできます。

 リスト2で指定しているオプションを表1に示します。

表1 リスト2(jQPlot_area.html)で指定しているオプション
名前 既定値 設定値 概要
showMarker true false 折れ線の点(マーカー)を見せるか見せないかを指定。
ここでは見せないのでfalseを設定。
seriesDefaults -     

-

グラフの種類や系列の色や太さなどの初期設定。
この中でさらにオプションを指定する。
fill false true 折れ線の下を塗りつぶすか塗りつぶさないかを指定。
ここでは塗りつぶすのでtrueを設定。
axes - - 軸に関する初期設定。この中でさらにオプションを指定する。
xaxis - - 横軸に関する初期設定。この中でさらにオプションを指定する。
pad - 0 横軸上の余白を設定。ここでは0を設定して余白をなくす。

 あとはdivタグでグラフの高さと幅を指定すれば、面グラフを表示できます。


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

バックナンバー

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

もっと読む

著者プロフィール

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

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

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

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

あなたにオススメ

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