様々なタイプのグラフ表示をカバーする「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でデータ引っ張ってくるのを効率的にできないかをやってみようと思います。また、機会があれば、別のタイプのグラフにも挑戦してみようと思います。
関連記事
-
-
画像をモザイク処理(ピクセル化)してくれるプラグイン「Pixelate.js」
「Pixelate.js」はその名の通り画像をピクセル化してくれるjQueryプラグインです。画面ロード時にピクセル化しておき、画像にマウスオーバーすると暴露してくれます。 ダウンロード | デモ
-
-
シンプルでカスタマイズ豊富なスライダー用プラグイン「bxSlider」
「bxSlider」はシンプルに設置でき、かついろいろとオプションが設定可能なスライダー用プラグインです。サイト CDN 標準でもしくはオプションで実現できそうなこと スワイプ キャプション
-
-
「jqPlot」を使って棒グラフを作成
jqPlotを使って棒グラフを作成してみました。ベースはこの記事を参照ください。 スクリプト jqPlotのベースとなるjsファイルと以下の棒グラフの作成に必要なスクリプトを読み込んで下さい。
-
-
ページの画像を非同期で読み込んでくれる「Lazy Load」
「LazyLoad Plugin」は、画像をページのロード時ではなく非同期に読み込んでくれるjQueryプラグインです。設定によりスクロールした際に画像をロードしたりしてくれます。 ダウンロード |
-
-
クレジットカード番号のバリデーションとカード会社を特定してくれる「jQuery Credit Card Validator」
「jQuery Credit Card Validator」は、クレジットカード番号のバリデーションを行ってくれるjQueryプラグインです。入力したカード番号の検証とそれに基づいてカード会社の表示を
-
-
カルーセル プラグイン
「カルーセル(Carousel)」とは"回転木馬"という意味らしいのですが、jQuery(Javascript)では画像やコンテンツをスライド表示させるもののようです。が、スライダーとの違いはよく分り
-
-
要素を折りたたみできる「nestedAccordion」
「nestedAccordion」は、クリックすると要素を開閉(折りたたみ)できるjQueryプラグインです。名前の通りネストして、アコーディオンの中にアコーディオンも実装できます。ダウンロードはこち
-
-
入力されたメールアドレスのドメインをサジェストしてくれる「mailcheck.js」
「mailcheck.js」は、入力されたメールアドレスのドメインをサジェストしてくれるjQueryプラグインです。 ダウンロード スクリプト 実装 v
-
-
カウントダウン プラグイン
FlipClock #時間 FlipClock サイト [browser-shot url="http://xdsoft.net/jqplugins/flipcountd
-
-
グリッドレイアウト プラグイン
Waterfall サイト pinbox [browser-shot url="http://kayschneider.github.io/pinbox/example/pinb
- PREV
- フィールド単位でバリデーション無効化
- NEXT
- CakePHP 2.x インストール
Comment
jQuery | 様々なタイプのグラフ表示をカバーする「jqPlot」 | Think deeply, Do less, More effective http://t.co/JyvdqyrkPZ
jquery jqplot