jQuery の jqPlot プラグイン

jqPlotプラグインは、グラフ(チャート、図表)を生成するjQueryプラグイン。

折れ線グラフ、棒グラフ、円グラフ、ドーナツグラフ、バブルチャートなどを、簡単に描ける。

オプションも豊富だ。

導入

公式サイトDownloadより、最新版をダウンロード。

2012年2月6日現在の最新版は、「1.0」なので、「jquery.jqplot.1.0.0b2_r1012.zip」をダウンロード。

解凍すると、ファイルの多さに驚くかもしれないが、下記の実装例(サンプル)のような折れ線グラフを作るのに、最低限必要なファイルは、「jquery.jqplot.min.js」と、「jquery.jqplot.min.css」の2つだけ。IE9より前のバージョンのIEにも対応させる場合は、「excanvas.min.js」も必要だ。

「plugins」フォルダに入っているJavascriptファイルは、グラフの種類を変更したり、グラフをカスタマイズしたい時に必要なことがある。

実装例(サンプル)

実装例(サンプル)について

実装例(サンプル)のソースコードについては、こちら

使い方

読み込み

パスは、それぞれ、アップロードした場所を指定する。

<script language="javascript" type="text/javascript" src="jquery-1.7.1.min.js"></script>
<!--[if lt IE 9]>
    <script language="javascript" type="text/javascript" src="excanvas.min.js"></script>
<![endif]-->
<script language="javascript" type="text/javascript" src="jquery.jqplot.min.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.jqplot.min.css" />

カスタマイズ時には、上記以外に、「plugins」フォルダに入っているJavascriptファイルが必要なことがある。

JavaScript

<script>
jQuery( function() {
    jQuery . jqplot(
        'グラフを表示する要素のID',
        [
            [ 系列A ],
            [ 系列B ],
            [ 系列C ]
        ],
        {
            オプション
        }
    );
} );
</script>

jqplotの1つ目の引数には、グラフを表示させる要素のIDを指定。

jqplotの2つ目の引数には、グラフにする系列データを、配列で指定。データの指定方法は、グラフの種類により異なる。

jqplotの3つ目の引数には、オプションを指定。

HTML

<div id="グラフを表示する要素のID" style="height: 高さ; width: 幅;"></div>

ここで指定した高さと幅が、グラフの大きさになる。

オプション

オプションについては、こちら

プラグイン

よく使うプラグイン。

プラグインは、「plugins」フォルダに入っており、必要に応じて、個別に呼び出す。

jqplot.barRenderer.js

棒グラフを作るときに必要。

jqplot.blockRenderer.js

ブロックチャートを作るときに必要。

jqplot.bubbleRenderer.js

バブルチャートを生成するのに必要。

jqplot.canvasOverlay.js

グラフに線を描き加えるのに必要。

jqplot.categoryAxisRenderer.min.js

軸をカテゴリ(区分)として扱い、グリッドをカテゴリ区切り線として表示させたいときに必要。

jqplot.dateAxisRenderer.js

年月日や時刻など、軸を時間軸として扱う際に必要。

jqplot.donutRenderer.js

ドーナツグラフを作るときに必要。

jqplot.dragable.js

系列のデータポイントをドラッグで移動できるようにするときに必要。

jqplot.enhancedLegendRenderer.js

凡例機能を拡張するときに必要。

jqplot.highlighter.js

ツールチップなど、ハイライト表示に必要。

jqplot.meterGaugeRenderer.js

メーターゲージを作るときに必要。

jqplot.ohlcRenderer.js

いかり足やローソク足などのチャートを作るときに必要。

jqplot.pieRenderer.js

円グラフ(パイチャート)を作るときに必要。

jqplot.enhancedLegendRenderer.min.js

凡例の機能を強化する。

jqplot.pointLabels.js

データポイントラベルを表示するのに必要。

jqplot.trendline.js

トレンドラインを描き加えるのに必要。

スポンサード リンク

カテゴリー: JavaScript, jqPlot, jQuery, グラフ、チャート, プラグイン パーマリンク