様々なタイプのグラフ表示をカバーする「jqPlot」(折れ線グラフ)

Webページにグラフ表示する機会があったので、探してみました。
今回、使用してみた「jqPlot」がシンプルにもできてカスタマイズも豊富でいいです。グラフ用データの形式が少しクセがあり、動的に扱う際のやりとりが面倒ではありますが、そこは汎用化してしまえばいいので、問題なし。
ダウンロード / サンプル(折線グラフ)

スクリプト

以下の4つがjqPlotを使用するにあたり最低限必要なファイルになります。
IE8で「'window.G_vmlCanvasManager' は Null またはオブジェクトではありません」と怒られたら、excanvas.min.jsがロードされているか確認して下さい。

<link  href="jquery.jqplot.min.css" type="text/css" rel="stylesheet">
<script src="jquery.min.js" type="text/javascript">
<script src="jquery.jqplot.min.js" type="text/javascript">
<script src="excanvas.min.js" type="text/javascript">

これは軸の値に日付を用いるため使用するプラグインです。

<script src="/plugins/jqplot.dateAxisRenderer.min.js" type="text/javascript">

実装

<div id="div998"></div>

<script type="text/javascript">
$(document).ready(function(){

    // 表示データ
    data = [[
        ['2011/01/01',10237.92],['2011/02/01',10624.09],['2011/03/01',9755.10],['2011/04/01',9849.74], ['2011/05/01',9693.73], ['2011/06/01',9816.09],['2011/07/01',9833.03], ['2011/08/01',8955.20], ['2011/09/01',8700.29],['2011/10/01',8988.39], ['2011/11/01',8434.61], ['2011/12/01',8455.35],['2012/01/01',8802.51], ['2012/02/01',9723.24], ['2012/03/01',10083.56],['2012/04/01',9520.89], ['2012/05/01',8542.73], ['2012/06/01',9006.78],['2012/07/01',8695.06], ['2012/08/01',8839.91], ['2012/09/01',8870.16],['2012/10/01',8928.29], ['2012/11/01',9446.01], ['2012/12/01',10395.18],['2013/01/01',11138.66],['2013/02/01',11559.36]
    ]]

    // オプション
    options = {
        // グラフのタイトル
        title: { text: '日経平均株価 推移'},
        axes:{                                            // 軸
            // 横軸(x軸)
            xaxis:{
                renderer: $.jqplot.DateAxisRenderer,      // プラグイン
                min: '2011-01-01',                        // 軸開始の値
                max: '2013-02-01',                        // 軸終了の値
                tickInterval: '3 months',                 // 目盛りの間隔
                tickOptions: { formatString: '%Y/%m'},    // 表示フォーマット
                label: 'month',                           // ラベル
            },
            // 縦軸(y軸)
            yaxis:{
                label: '日経平均株価(円)',                // ラベル
            }
        }
    }

    // 作成実行 (グラフ表示する#div, 表示データ, オプションの順に指定)
    $.jqplot( 'div998', data, options);
});
</script>

.jqplotへ3つの引数を渡します。

  • 第1引数
    グラフ表示するdivのidを指定
  • 第2引数
    グラフデータを指定します。形式は、['横軸の値','縦軸の値']をカンマ区切りで羅列していき、全体を[[ (値の羅列) ]]のようにします。
  • 第3引数
    グラフのオプションを指定 オプションの説明ページ

tickIntervalは、軸の開始(min)を指定している場合は、'1 months'などの表現でできますが、min指定なしの場合は、Javascriptの文法に従って、unixtimeのミリ秒で指定できます。=> 1日は、tickInterval:'86400000' と指定(=24*60*60*1000)

1つ慣れてしまえば、いろんなグラフが簡単にできそうですので、次回はPHPでデータ引っ張ってくるのを効率的にできないかをやってみようと思います。また、機会があれば、別のタイプのグラフにも挑戦してみようと思います。

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

関連記事

no image

数値入力に便利なステッパーを実装「Numeric Stepper」

「Numeric Stepper」は、数値用のステッパーを実装できるjQueryプラグインです。ダウンロード | デモ スクリプト 実装 既存のテキストボックスにclas

「jqPlot」 カスタマイズ

以前、ここで使用した「jqPlot」ですが、色々なキーワードで訪問される方がいらっしゃったので、それを元ネタとして使わせてもらいカスタマイズ方法を紹介したいと思います。 以下4つのファイルへリンクし

レスポンシブ対応の画像スライダー・ギャラリー用プラグイン

画像スライダー(ギャラリー)を作成してくれるjQueryプラグインの中からレスポンシブ対応のものをいくつか集めてみました。 シンプルでカスタマイズ豊富なスライダー用プラグイン「bxSlide

no image

グラフ作成 プラグイン

C3.js C3.js サイト [browser-shot url="http://www.chartjs.org/" width="200" imgclass=" ali

no image

シンプルな画像スライダー/ギャラリー用プラグイン

スライダーやギャラリーを実装できるjQueryプラグインのうちシンプルなものを集めてみました。ベースはシンプルですが、オプションなどを使用してカスタマイズが豊富なものもたくさんありますね。 シン

テキストボックスの入力値を数値限定にしてくれる「jQuery - numeric」

「jQuery - numeric」は、テキストボックスへの入力を数字のみに制限してくれるjQueryプラグインです。正/負、整数/小数点 チェックまで限定してくれます。ダウンロード スクリプト

ECサイトの商品表示に使えそうなスライダー「Simple Multi-Item Slider」

「Simple Multi-Item Slider」は、いうなればネスト型の画像スライダーです。ECサイトでの商品陳列からサムネイルメニューなどにも使用できそうです。ダウンロード デモ スクリプ

カレンダー実装プラグイン「Bootstrap Calendar」

「Bootstrap Calendar」はBootstrap 3ベースでカレンダーが実装できるjQueryプラグインです。 ダウンロード スクリプト

ナビゲーション内にサムネイルを設置できる画像スライダー・ギャラリー用プラグイン

画像ギャラリーを作成してくれるjQueryプラグインはたくさん制作されています。その中でもサムネイルを使用してギャラリーのナビゲーションを行ってくれるプラグインをいくつか集めてみました。 サムネ

表示パターン豊富なスライダー「flexslider 2」

「flexslider 2」は、シンプルに実装でき、かつカスタマイズ機能が豊富なスライダー用プラグインです。 flexslider 2 オプションや機能 サムネイルナビゲーション 複数表示

Comment

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

PAGE TOP ↑