今回は、jQuery でグラフを作ってみます。

jQueryには、すでにいくつかのグラフ用プラグインが作られています。デザイン的に魅力的なFlot(デモ)やjQuery Chart Plugin (デモ)などがありますが、 今回は、私が作ってみた自作プラグイン jQchartについて簡単に紹介してみます。

jQchart

jQchartは、なるべく簡単に、Ajaxなグラフを利用できるように意識して作ってみたjQueryプラグインです。 とりあえず、簡単なサンプルをみてみます。


ソースは次の通り。
<!--[if IE]>
<script src="./excanvas-compressed.js" type="text/javascript" ></script>
<![endif]-->
<script src="./jquery-min.js" type="text/javascript"></script>
<script src="./jquery.jqchart.js" type="text/javascript"
        charset="utf-8"></script>

<body>
<canvas id="canvasMyID1"></canvas>

<script type="text/javascript">

var setting={
  data : [ [300,500,600,700,888,777,666] ]
};

$(function(){
	$('#canvasMyID1').jQchart(setting);
})

</script>


簡単にいうと、jQchartメソッドの引数でoj.data[]という配列へ表示したいデータを書けばグラフになります。

まず、<!--[if IE]><![endif]-->によるブラウザ分岐を利用して、IEの場合だけ、excanvas.js(ここでは圧縮版excanvas-compressed.js)を読み込み、次にjquery-1.2.3.js、そして、jquery.jqchart.jsを読み込んでいます。

グラフの作成は、ブラウザ上に図を描くためのcanvas要素を利用していますが、残念ながらIEでは動作しませんので、IEの場合だけ、Google が作ったIE用互換ライブラリexcanvasを使っています。

グラフは次のキャンバス要素へ描画されます。
<canvas id="canvasMyID1"></canvas>
もし、サイズを変更したければ、このキャンバス要素の属性width、heightを指定するか、jQchartメソッドの引数でセットします。 たとえば、次のようにwidth="400" height="300"と書くだけでサイズが変わります。
<canvas id="canvasMyID2" width="400" height="300"></canvas>
あるいは、スクリプトで次のように設定もできます。
<canvas id="canvasMyID3"></canvas>
var setting2={
  config : {      width: 200 ,      height : 200 
  },
  data : [[250,550,600,750]]
};

$(function(){
  $('#canvasMyID3').jQchart(setting2);
})
また、X軸のラベルlabelXやタイトルなども設定できます。複数のdata配列を指定すると、自動的に色がつきます(詳細は次ページ)。
<canvas id="canvasMyID31" height="200"></canvas>

<script type="text/javascript">

 var chartSetting={
   config : {
    title  :        '<b>Title</b> を HTMLで指定でき',     labelX :        ["日","月","火","水","木","金","土"],             scaleY : {min: 0,max:1200,gap:200}
   },
    data : [            [500,600,770,700,888,777,1100],      [150,180,312,200,402,300,580]
    ]
  };

  $(function(){
    $('#canvasMyID31').jQchart(chartSetting);
  })

</script>


データを外部ファイルとして用意しておき、Ajaxで読み込んで描画するためには次のようにします。

<canvas id="canvasMyID4" height="180"></canvas>

<script type="text/javascript">
$(function(){
  $('#canvasMyID4').jQchart('/gm/gc/24175/file/data0.txt')
})
</script>
このグラフで読み込んだファイルdata0.txtは次の通り。
{
  data : [
    [325,555,780,445,666,450,900]
  ]
};
これが、できれば、あとは、ボタンクリックなどのイベントで好きなデータを切り替えて表示できるわけですが、それは 後ろのページで後ほど試してみます。


では、次ページで、もうひとつ簡単なサンプルを試してみます。