SHOEISHA iD

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

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

jQuery UI/プラグインの活用

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

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

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

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

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

はじめに

 今回は、多彩なグラフを表示できるjQueryプラグイン「jQPlot」を解説します。この「jQPlot」最大の特長はこのプラグイン専用の多種多様な機能拡張スクリプトが揃っていること。そうしたスクリプトを使うことで、棒グラフ、折れ線グラフ、円グラフといった基本的なグラフのみならず、ドーナツグラフ、バブルチャートなど、多彩なグラフを描くことができます。

対象読者

  • jQueryプラグインに興味があり、使ってみたい方

必要な環境と準備

 執筆時点のjQueryの最新版は、1.8.1です。第1回を参考に、ダウンロードしてください。また、jQueryプラグインの基本的な使い方は、第3回を参照してください。

 サンプルでは、htmlファイルと同じ階層に「plugins」というフォルダを作成し、「jQPlot」プラグインや機能拡張のスクリプトはこのフォルダに置きます。

jQPlotの基本的な使い方

 jQPlotプラグインは、jQPlot専用の機能拡張を用いることにより、多種多様なグラフを描くことができます。まずはごく簡単な折れ線グラフを例に、基本的な使い方を見てみましょう。

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

jQuery Visualizeプラグインの使い方

 jQPlotプラグインのダウンロードサイト上の「Download Now!」アイコンをクリックして、現時点での最新バージョン「jquery.jqplot.1.0.4r1120.zip」をダウンロードし、解凍します。解凍したフォルダ内の「dist」フォルダ直下からプラグイン本体の「jquery.jqplot.min.js」とバージョン9以前のInternet ExplorerでHTML5のcanvas要素を呼び出す「excanvas.min.js」を「plugins」フォルダ下に配置します。また「dist」フォルダ内の「plugins」フォルダにある機能拡張スクリプトも必要なものを「plugins」フォルダ下に配置します。そして解凍したフォルダ内の「css」フォルダをそのままコピーして使用します。

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

リスト1 折れ線グラフの表示(jQPlot_line.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(){
    jQuery.jqplot(
        'line',
        [
            [[1,25],[2,94],[3,68],[4,81],[5,34]]
        ]
    );
} );
</script>

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

 1.jQueryの読み込みで「Scripts」フォルダ内のjQuery本体「jquery-1.8.1.min.js」を呼び出した後、2.IE9以前のバージョンへの対応では、IE9より前のバージョンのIEでHTML5のcanvas要素を呼び出すため、「excanvas.min.js」を呼び出します。次に3.プラグインの読み込みで「plugin」フォルダ内のjQueryプラグイン「jquery.jqplot.min.js」を呼び出します。そして4.CSSの読み込みでcssファイルを呼び出します。

 5.プラグインの設定では「jQuery(function(){});」の中に「jQuery.jqplot();」と記載し、jQPlotプラグインを機能させます。()内の「'line'」は後でdivタグを使ってグラフを表示するための適当な文字列をIDとして指定します。その後の[]内に折れ線グラフの点の数値を指定します。数値の指定方法は線で繋ぐ一つ一つの点のデータを[]内に[横軸の値,縦軸の値]といった形で記述し、これらのデータを[]で囲みます。

 あとはdivタグで、「id='line'」といった記述で事前にIDとして指定した文字列を指定し、グラフの高さと幅を指定すれば、折れ線グラフを表示できます。

会員登録無料すると、続きをお読みいただけます

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

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

メールバックナンバー

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

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

  • 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」など、さまざまなカンファレンスを企画・運営しています。

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

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

メールバックナンバー

アクセスランキング

アクセスランキング