様々なタイプのグラフ表示をカバーする「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でデータ引っ張ってくるのを効率的にできないかをやってみようと思います。また、機会があれば、別のタイプのグラフにも挑戦してみようと思います。

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

関連記事

シンプルでカスタマイズ豊富なスライダー用プラグイン「bxSlider」

「bxSlider」はシンプルに設置でき、かついろいろとオプションが設定可能なスライダー用プラグインです。サイト CDN 標準でもしくはオプションで実現できそうなこと スワイプ キャプション

わずかなコードで画像をサムネイル化してくれる「MyThumbnail.js」

サムネイル化してくれるJQueryプラグインは数多くありますが、この「MyThumbnail」はわずか数行で簡単にページ上の画像を指定サイズにサムネイル化してくれます。 ダウンロード 画像とし

親要素の大きさに合わせて画像をリサイズ「imgLiquid」

「imgLiquid」は親要素の大きさに合わせて画像を縮小・切り取りを行ってくれるjQueryプラグインです。 ダウンロードはこちら スクリプト 実装

クレジットカード番号のバリデーションとカード会社を特定してくれる「jQuery Credit Card Validator」

「jQuery Credit Card Validator」は、クレジットカード番号のバリデーションを行ってくれるjQueryプラグインです。入力したカード番号の検証とそれに基づいてカード会社の表示を

画像ズーム プラグイン

画像をズームしてくれるプラグインには、ツールチップ的にサムネイルにマウスオーバーした部分をズームアップしたり元画像を表示したり、その画像内でインナーズームする というような機能があるようです。

no image

エフェクト豊富なニュースティッカー用プラグイン「inewsticker」

「inewsticker」は、色々なエフェクトでニュースティッカーが実装できるjQueryプラグインです。ダウンロード エフェクトには、fade/slide/typingの3つが可能です。 デ

レスポンシブにも対応したカレンダーを表示する「Calendario.js」

Calendarioは、レスポンシブデザインにも対応したカレンダ表示プラグインです。 ダウンロード スクリプト 実装 $(document).ready

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

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

no image

要素を折りたたみできる「nestedAccordion」

「nestedAccordion」は、クリックすると要素を開閉(折りたたみ)できるjQueryプラグインです。名前の通りネストして、アコーディオンの中にアコーディオンも実装できます。ダウンロードはこち

「jqPlot」を使って円グラフを作成

Webサイトで円グラフ表示したいと要望があったので、以前使用したjqPlotでデモを作成しました。ダウンロード 最初の要望は「凡例つけて」、「いい感じにカラーリングしてほしい。」、「定期的に変更

Comment

Message

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

*

PAGE TOP ↑