jqueryのjqplotで簡単にグラフを描くことができます。divを指定すると簡単に埋め込むことができるので便利です。機能もかなり充実しています。
できること(わかっている範囲で)
- グラフタイトルの設置
- 行タイトルの設置
- 各種グラフ(円グラフ・折れ線・チャート・棒グラフなど)
- 項目名
- ドラッグで変形
- ドラッグした箇所のズーム(ダブルクリックで元に戻せる)
- 複数データの使用
- 範囲から日付の使用
- 項目の回転
使用方法・・ソースをダウンロードすると付いてくるサンプルを見るとわかりやすい。
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>