様々なタイプのグラフ表示をカバーする「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でデータ引っ張ってくるのを効率的にできないかをやってみようと思います。また、機会があれば、別のタイプのグラフにも挑戦してみようと思います。
関連記事
-
-
クリックするとテキストボックスにかわるラベルを実装
Flickrなどでは、写真の編集画面でキャプションをラベルとして表示しておきクリックするとテキストボックスやテキストエリアに変換してくれて編集させるようなインターフェイスを実装しています。結構いいです
-
-
エフェクト豊富なニュースティッカー用プラグイン「inewsticker」
「inewsticker」は、色々なエフェクトでニュースティッカーが実装できるjQueryプラグインです。ダウンロード エフェクトには、fade/slide/typingの3つが可能です。 デ
-
-
マウスオーバーすると画像にキャプションを表示してくれる「Mosaic」
「Mosaic」は、画像などにマウスオーバーすると、キャプションをスライド(イン/アウト)もしくはフェイド(イン/アウト)させてくれるjQueryプラグインです。ダウンロードはこちら スクリプト
-
-
定期的にAjaxリクエストを送信してくれる「PeriodicalUpdater」
PeriodicalUpdaterは、定期的にpostもしくはgetリクエストを送信してくれるjQueryプラグインです。Twitterのタイムラインのように定期的にツイートをロードしてくれるようなや
-
-
商用利用フリー Lightbox プラグイン
商用利用フリー(投稿時)のlightbox用プラグインをまとめてみました。最新のライセンスに関しては各サイトに確認をお願いいたします。) lightboxの中にもギャラリー表示が可能なもの、ギャラリ
-
-
カルーセル プラグイン
「カルーセル(Carousel)」とは"回転木馬"という意味らしいのですが、jQuery(Javascript)では画像やコンテンツをスライド表示させるもののようです。が、スライダーとの違いはよく分り
-
-
レスポンシブに対応した画像ギャラリーが実装できる「Responsive Image Gallery」
「Responsive Image Gallery with Thumbnail Carousel」はレスポンシブにも対応した画像ギャラリーが実装できるjQueryプラグインです。Twitterの「最
-
-
jqPlot - Legend(凡例) オプション
jqPlotの凡例(Legend)の設定オプションのまとめです。前提は、こちらを参照して下さい。 目次 凡例を表示 凡例の位置 [location, placement] 凡例のフォ
-
-
リストをインクリメント検索・ソートできる「List.js」
List.jsは、リストをインクリメント検索やソートができるjQueryプラグインです。 ダウンロードはこちら リストだけでなくテーブルにも実装可能のようです。 スクリプト
-
-
入力テキストの文字数をカウントしてくれる「Textchange」
Twitterのようにinputやtextareaに入力した際に、文字数をカウント(ダウン)してくれるとユーザの利便性が上がります。今回使用したTextChangeは、それ以外にも入力のイベントに対し
- PREV
- フィールド単位でバリデーション無効化
- NEXT
- CakePHP 2.x インストール
Comment
jQuery | 様々なタイプのグラフ表示をカバーする「jqPlot」 | Think deeply, Do less, More effective http://t.co/JyvdqyrkPZ
jquery jqplot