様々なタイプのグラフ表示をカバーする「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でデータ引っ張ってくるのを効率的にできないかをやってみようと思います。また、機会があれば、別のタイプのグラフにも挑戦してみようと思います。
関連記事
-
-
ポップアップ・モーダル ウィンドウ プラグイン
ポップアップ シンプルにポップアップを実装できる「PopBox」 実装方法が選べるツールチップ用プラグイン「Smallipop」 Bootstrap Popovers
-
-
マウスオーバーすると画像にキャプションを表示してくれる「Mosaic」
「Mosaic」は、画像などにマウスオーバーすると、キャプションをスライド(イン/アウト)もしくはフェイド(イン/アウト)させてくれるjQueryプラグインです。ダウンロードはこちら スクリプト
-
-
わずかなコードで画像をサムネイル化してくれる「MyThumbnail.js」
サムネイル化してくれるJQueryプラグインは数多くありますが、この「MyThumbnail」はわずか数行で簡単にページ上の画像を指定サイズにサムネイル化してくれます。 ダウンロード 画像とし
-
-
画像をモザイク処理(ピクセル化)してくれるプラグイン「Pixelate.js」
「Pixelate.js」はその名の通り画像をピクセル化してくれるjQueryプラグインです。画面ロード時にピクセル化しておき、画像にマウスオーバーすると暴露してくれます。 ダウンロード | デモ
-
-
リストをインクリメント検索・ソートできる「List.js」
List.jsは、リストをインクリメント検索やソートができるjQueryプラグインです。 ダウンロードはこちら リストだけでなくテーブルにも実装可能のようです。 スクリプト
-
-
入力されたメールアドレスのドメインをサジェストしてくれる「mailcheck.js」
「mailcheck.js」は、入力されたメールアドレスのドメインをサジェストしてくれるjQueryプラグインです。 ダウンロード スクリプト 実装 v
-
-
クレジットカード番号のバリデーションとカード会社を特定してくれる「jQuery Credit Card Validator」
「jQuery Credit Card Validator」は、クレジットカード番号のバリデーションを行ってくれるjQueryプラグインです。入力したカード番号の検証とそれに基づいてカード会社の表示を
-
-
数値入力スライダー「jQuery Simple Slider」
「jQuery Simple Slider」はスライダーを使用して数値設定が行えるようにしてくれるjQueryプラグインです。"Unobtrusive Numerical Slider"とあるように余
-
-
シンプルにモーダルウィンドウを実装できる「leanModal」
「leanModal」は、シンプルにモーダルウィンドウを設置できるjQueryプラグインです。オプションは少なめですが、複雑な機能は必要なく単に設置したいという場合にはもってこいのライブラリだと思いま
-
-
シンプルにポップアップを実装できる「PopBox」
「PopBox」は、シンプルにポップアップを実装できるjQueryプラグインです。 スクリプト HTML Click Here!
- PREV
- フィールド単位でバリデーション無効化
- NEXT
- CakePHP 2.x インストール
Comment
jQuery | 様々なタイプのグラフ表示をカバーする「jqPlot」 | Think deeply, Do less, More effective http://t.co/JyvdqyrkPZ
jquery jqplot