jqplotで簡単にグラフを描く

jqueryのjqplotで簡単にグラフを描くことができます。divを指定すると簡単に埋め込むことができるので便利です。機能もかなり充実しています。

できること(わかっている範囲で)

  1. グラフタイトルの設置
  2. 行タイトルの設置
  3. 各種グラフ(円グラフ・折れ線・チャート・棒グラフなど)
  4. 項目名
  5. ドラッグで変形
  6. ドラッグした箇所のズーム(ダブルクリックで元に戻せる)
  7. 複数データの使用
  8. 範囲から日付の使用
  9. 項目の回転

使用方法・・ソースをダウンロードすると付いてくるサンプルを見るとわかりやすい。

1.表示位置の指定

<div id="表示divのID" style="width:560px; height: 350px;"></div>

2.グラフの設定

 

<script type="text/javascript">
$(document).ready(function(){  
//データの指定
var 第1グラフのデータ = [['2010/01/01',2],['2010/01/02',4],['2010/01/03',6],['2010/01/04',8]];
var 第2グラフのデータ = [['2010/01/01',6],['2010/01/02',9],['2010/01/03',2],['2010/01/04',3]];
 
plot = $.jqplot('表示divのID', [第1グラフのデータ,第2グラフのデータ], {
title:'検索順位', //タイトル
legend:{  //グラフの項目名表示位置の設定
show:true,
location: 'nw',
yoffset: 3
   },
seriesDefaults: {lineWidth:0},
series:[  //グラフの項目名の設定
{label:'google'},
{label:'yahoo'}
],
axes: {  
xaxis:{  //横軸の項目設定
renderer: $.jqplot.DateAxisRenderer,  
tickRenderer: $.jqplot.CanvasAxisTickRenderer,  
min:'2010/01/01', 
max:'2010-01-30',
numberTicks: 30,
label:'日付',
tickOptions: {
angle: 35 //回転角度
       }
},  
yaxis:{  //縦軸の項目設定
min:0,
max:200,
label:'順位'  
}
},
highlighter:{ //ポインタのオプション設定
show:true,
tooltipLocation: 'n',
tooltipAxes:'y',
formatString: '%d位'
},  
cursor:{  //ズームのオプション設定
show:true,
zoom:true
})
 });  
   </script>

コメントを残す

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