PHPとjQueryライブラリ「jqPlot」で綺麗なグラフを描画する【5/10】

さて、折れ線グラフのデータを元に、まずは棒グラフを作成してみよう。
最初にほぼプレーンな折れ線グラフを描画してみる。分かりやすいように、読み込むライブラリは最低限にしておく。

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.jqplot.min.js"></script>

データなどの定義はこのようにしてみた。

$(document).ready(function(){
  var data1 = [8,5,7,6,9,12,5,1,2,4,3,7,1,2,1,3,4,6,9];
  plot = $.jqplot('graph', [data1]);
});

少々x軸方向へのデータが多いので、HTMLで作成した描画エリアも多少サイズを変更しておいた。

<h1>jqPlot Test 2</h1>
<div id="graph" style="width:600px;height:200px;margin:30px;"></div>

これをブラウザで表示させると、以下のようになった。

これを折れ線グラフから、棒グラフへ変更してみる。
デフォルトでは折れ線だが、そのほかの形式へ変更するには、都度プラグインを読み込む必要がありそうだ。棒グラフの場合、barRendererプラグインになる。

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.jqplot.min.js"></script>
<script type="text/javascript" src="plugins/jqplot.barRenderer.min.js"></script>

これで棒グラフを描画する準備が整った。
次に、plotに対して例によってオプションを指定しよう。グラフ全体に関わるデフォルト値として、seriesDefaultというプロパティが用意されているので、早速追記しておく。

plot = $.jqplot('graph', [data1], {
    seriesDefaults: {
    }
  });

さて、このseriesDefaultに何を指定するのか、だ。このままでは折れ線グラフは棒グラフにはならない。よって、グラフの形態を変更するためのrendererプロパティをまずは記述しようじゃないか。

plot = $.jqplot('graph', [data1], {
    seriesDefaults: {
      renderer:$.jqplot.BarRenderer
    }
  });

これで棒グラフが描画されるはずだ。早速ブラウザで見てみる。

棒グラフにはなったはなったが、なんじゃこれは。使い物になるレベルではない。これではよろしさが皆無である。

どうしてこうなったのかと言うと、棒グラフの横幅が太すぎるからだ。なので、マージンを設定して狭めてみよう。
rendererの細かい挙動を設定する、rendererOptionsというプロパティを使う。

plot = $.jqplot('graph', [data1], {
    seriesDefaults: {
      renderer:$.jqplot.BarRenderer,
      rendererOptions: {
        barMargin: 60
      }
    }
  });

これで少しは人に優しい面（ツラ）になったはずだ。というわけで、ブラウザで見てみた結果が以下になる。

少しはまともになった。
barMarginは微調整する必要がある。1つのグラフにいくつのデータを表示させるのか、によって、重なってしまったり、細すぎてツィギーみたいな針状態になってしまうこともある。何度か調整するとよいだろう。今回は60で良しとしてみた。

そして次は、この棒グラフに折れ線グラフを重ねてみようと思う。
まずはデータを以下のように追加しておく。

var data1 = [8,5,7,6,9,12,5,1,2,4,3,7,1,2,1,3,4,6,9];
var data2 = [3,6,7,9,8,10,7,5,7,9,7,5,3,2,1,4,3,2,3];

ちなみに数値は適当に連打して作ったものなので、グラフとしてはおかしな場合があるが、テストしている状況であるので、これで良しとする。

さて、プロパティの設定だが、実は先ほどのseriesDefaultsではなく、今回は個別に指定するのでseriesとする（デフォルトを指定するわけではないので）。

今回はデータが2個あるので、series内に先ほどのseriesDefaultsで記述した様な内容が兄弟要素として複数もてなければいけない。よって、配列を「[～]」で囲み、1個目の配列（data1）、2個目の配列（data2）、のように、順序によって指定することにする。

plot = $.jqplot('graph', [data1,data2], {
    series:[
      {
        renderer:$.jqplot.BarRenderer,
        rendererOptions:{
          barMargin:60
        }
      }
    ]
  });

これで、1個目のデータは棒グラフになる。2個目は指定していないので、デフォルトの折れ線グラフになる。
先ほどのソースコードとはほとんど違いがないので少々ややこしいが、配列を配列に入れることにより兄弟とし、デフォルトでよい場合は特に指定をしてない、という状態であることを補足しておく。
この状態でブラウザで見ると、以下のようになる。

折れ線と棒の指定順序を間違えると、折れ線が棒の裏になってしまうこともあるので気をつけよう。
この時点での全てのソースコードは以下になる。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>jqPlot テスト</title>
<link rel="stylesheet" type="text/css" href="jquery.jqplot.css" />
<!--[if IE]><script language="javascript" type="text/javascript" src="excanvas.min.js"></script><![endif]-->
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.jqplot.min.js"></script>
<script type="text/javascript" src="plugins/jqplot.barRenderer.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  var data1 = [8,5,7,6,9,12,5,1,2,4,3,7,1,2,1,3,4,6,9];
  var data2 = [3,6,7,9,8,10,7,5,7,9,7,5,3,2,1,4,3,2,3];
  plot = $.jqplot('graph', [data1,data2], {
    series:[
      {
        renderer:$.jqplot.BarRenderer,
        rendererOptions:{
          barMargin:60
        }
      }
    ]
  });
});
</script>
</head>
<body>

<h1>jqPlot Test 2</h1>
<div id="graph" style="width:600px;height:200px;margin:30px;"></div>

</body>
</html>

ちなみにseries内で1つだけ書いた上記設定を、カンマで区切って2個書いた場合はどうなるのか、を試してみる。

plot = $.jqplot('graph', [data1,data2], {
    series:[
      {
        renderer:$.jqplot.BarRenderer,
        rendererOptions:{
          barMargin:60
        }
      },
      {
        renderer:$.jqplot.BarRenderer,
        rendererOptions:{
          barMargin:60
        }
      }
    ]
  });

この状態だと、二つのデータが隣り合った状態で表示される。

隣り合わせるのではなく、重ねたい場合もあると思うが、以下のように設定することで重ね合わせが可能になるようだ。

plot = $.jqplot('graph', [data1,data2], {
    stackSeries: true,
    series:[
      {
        renderer:$.jqplot.BarRenderer,
        rendererOptions:{
          barMargin:60
        }
      },
      {
        renderer:$.jqplot.BarRenderer,
        rendererOptions:{
          barMargin:60
        }
      }
    ]
  });

stackSeriesプロパティをtrueにすると、各グラフを重ねてくれる。非常に簡単に実現できる。
この状態でブラウザで確認してみると、以下のようになる。

ギョ！またしても極めて遺憾なデザインになってしまった。どうもbarMarginはやりにくい。いっそ、幅を固定させてしまおうと思う。barMarginの部分を、barWidthに書き換え、任意のピクセル数を指定してみた。

plot = $.jqplot('graph', [data1,data2], {
    stackSeries: true,
    series:[
      {
        renderer:$.jqplot.BarRenderer,
        rendererOptions:{
          barWidth:16
        }
      },
      {
        renderer:$.jqplot.BarRenderer,
        rendererOptions:{
          barWidth:16
        }
      }
    ]
  });

barMarginをbarWidthにし、16を与えてみた結果が以下の画像だ。