CodeZine(コードジン)

特集ページ一覧

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

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

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

さらに多彩なグラフを表示

 jQPlotプラグインはさらに非常に多彩なグラフを表示できます。例としてドーナツグラフとバブルチャートグラフを紹介します。

ドーナツグラフの表示方法

 jQPlotプラグインで穴の空いた円グラフ、ドーナツグラフを表示させた結果を図5に示します。

図5 jQPlotプラグイン適用後(ドーナツグラフ表示)
図5 jQPlotプラグイン適用後(ドーナツグラフ表示)

 ドーナツグラフを表示する際のjQPlotプラグインの使用例をリスト7に示します。

リスト7 ドーナツグラフの表示(jQPlot_donut.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>
<script language="javascript" type="text/javascript" src="./plugins/jqplot.donutRenderer.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(
        'donut',
        [
            [['A',25],['B',94],['C',68],['D',81],['E',34]]
        ],
	{
	    seriesDefaults:{
		renderer:jQuery.jqplot.DonutRenderer,
                rendererOptions: {
                    padding: 15,
                    dataLabels: 'label',
                    showDataLabels: true
                }
	    },
	}
    );
});
</script>

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

</body>
</html>

 3.プラグインの読み込みで「jqplot.donutRenderer.min.js」という機能拡張スクリプトを読み込みます。このスクリプトはjQPlotのzipファイルの「dist」フォルダ内の「plugins」フォルダに入っているので、「jquery.jqplot.min.js」をコピーした「plugins」フォルダに移しておきます。

 5.プラグインの設定で設定しているオプションを表4に示します。

表4 リスト7(jQPlot_donut.html)で指定しているオプション
名前 既定値 設定値 概要
seriesDefaults - - グラフの種類や系列の色や太さなどの初期設定。
この中でさらにオプションを指定する。
renderer - jQuery.jqplot.DonutRenderer 機能拡張スクリプトを呼び出す。
ここではドーナツグラフを表示するため、jQuery.jqplot.DonutRendererを指定。
rendererOptions - - 機能拡張スクリプトの設定。
この中でさらににオプションを指定する。
padding - 15 円の周りの余白の大きさを指定。
ここでは15を指定。
dataLabels - label データラベルに値を表示するか、
ラベル(項目)を表示するか指定。
ここではラベル(項目)を指定。
showDataLabels false true データラベルを表示するかどうかを指定。
ここでは表示するのでtrueを設定。

  • 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