SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

jQuery UI/プラグインの活用

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

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

棒グラフの表示方法

 jQPlotプラグインで棒グラフを表示させた結果を図3に示します。

図3 jQPlotプラグイン適用後(棒グラフ表示)
図3 jQPlotプラグイン適用後(棒グラフ表示)

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

リスト5 棒グラフの表示(jQPlot_bar.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.barRenderer.min.js"></script>
<script language="javascript" type="text/javascript" src="./plugins/jqplot.categoryAxisRenderer.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(
        'bar',
        [
            [['A',25],['B',94],['C',68],['D',81],['E',34]]
        ],
	{
	    seriesDefaults:{
		renderer:jQuery.jqplot.BarRenderer,
	    },
	    axes:{
		xaxis:{
			renderer:jQuery.jqplot.CategoryAxisRenderer,
		}
	    }	    
	}
    );
});
</script>

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

</body>
</html>

 棒グラフを表示させるためには、jQPlot専用の機能拡張スクリプトを呼び出す必要があります。3.プラグインの読み込みで「jqplot.barRenderer.min.js」と「jqplot.categoryAxisRenderer.min.js」という機能拡張スクリプトを読み込みます。このスクリプトはjQPlotのzipファイルの「dist」フォルダ内の「plugins」フォルダに入っているので、「jquery.jqplot.min.js」をコピーした「plugins」フォルダに移しておきます。

 5.プラグインの設定では[]内のデータの指定部分で横軸に設定したい文字列を「''」で囲んで設定します。指定しているオプションは表2に示します。

表2 リスト5(jQPlot_bar.html)で指定しているオプション
名前 既定値 設定値 概要
seriesDefaults -     

-

グラフの種類や系列の色や太さなどの初期設定。
この中でさらにオプションを指定する。
renderer - jQuery.jqplot.BarRenderer 機能拡張スクリプトを呼び出す。
ここでは棒グラフを表示するため、jQuery.jqplot.BarRendererを指定。
axes - - 軸に関する初期設定。
この中でさらににオプションを指定する。
xaxis - - 横軸に関する初期設定。
この中でさらにオプションを指定する。
renderer - jQuery.jqplot.CategoryAxisRenderer 機能拡張スクリプトを呼び出す。
ここでは横軸の要素に文字列を設定するため、jQuery.jqplot.CategoryAxisRendererを指定。

 rendererオプションの中で、機能拡張スクリプトを呼び出します。

次のページ
円グラフの表示方法

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
jQuery UI/プラグインの活用連載記事一覧

もっと読む

この記事の著者

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

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

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

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

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/6873 2012/11/27 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング