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

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

view plainprint?

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

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

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

view plainprint?

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

$(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で作成した描画エリアも多少サイズを変更しておいた。

view plainprint?

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

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

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

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

view plainprint?

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

<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というプロパティが用意されているので、早速追記しておく。

view plainprint?

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

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

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

view plainprint?

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

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

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

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



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

view plainprint?

1. plot = $.jqplot('graph', [data1], {  
2.     seriesDefaults: {  
3.       renderer:$.jqplot.BarRenderer,  
4.       rendererOptions: {  
5.         barMargin: 60  
6.       }  
7.     }  
8.   });  

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

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

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

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

view plainprint?

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

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）、のように、順序によって指定することにする。

view plainprint?

1. plot = $.jqplot('graph', [data1,data2], {  
2.     series:[  
3.       {  
4.         renderer:$.jqplot.BarRenderer,  
5.         rendererOptions:{  
6.           barMargin:60  
7.         }  
8.       }  
9.     ]  
10.   });  

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

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

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

view plainprint?

1. <?xml version="1.0" encoding="UTF-8"?>  
2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
3.   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">  
5. <head>  
6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
7. <meta http-equiv="Content-Script-Type" content="text/javascript" />  
8. <meta http-equiv="Content-Style-Type" content="text/css" />  
9. <title>jqPlot テスト</title>  
10. <link rel="stylesheet" type="text/css" href="jquery.jqplot.css" />  
11. <!--[if IE]><script language="javascript" type="text/javascript" src="excanvas.min.js"></script><![endif]-->  
12. <script type="text/javascript" src="jquery-1.3.2.min.js"></script>  
13. <script type="text/javascript" src="jquery.jqplot.min.js"></script>  
14. <script type="text/javascript" src="plugins/jqplot.barRenderer.min.js"></script>  
15. <script type="text/javascript">  
16. $(document).ready(function(){  
17.   var data1 = [8,5,7,6,9,12,5,1,2,4,3,7,1,2,1,3,4,6,9];  
18.   var data2 = [3,6,7,9,8,10,7,5,7,9,7,5,3,2,1,4,3,2,3];  
19.   plot = $.jqplot('graph', [data1,data2], {  
20.     series:[  
21.       {  
22.         renderer:$.jqplot.BarRenderer,  
23.         rendererOptions:{  
24.           barMargin:60  
25.         }  
26.       }  
27.     ]  
28.   });  
29. });  
30. </script>  
31. </head>  
32. <body>  
33.   
34. <h1>jqPlot Test 2</h1>  
35. <div id="graph" style="width:600px;height:200px;margin:30px;"></div>  
36.   
37. </body>  
38. </html>  

<?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個書いた場合はどうなるのか、を試してみる。

view plainprint?

1. plot = $.jqplot('graph', [data1,data2], {  
2.     series:[  
3.       {  
4.         renderer:$.jqplot.BarRenderer,  
5.         rendererOptions:{  
6.           barMargin:60  
7.         }  
8.       },  
9.       {  
10.         renderer:$.jqplot.BarRenderer,  
11.         rendererOptions:{  
12.           barMargin:60  
13.         }  
14.       }  
15.     ]  
16.   });  

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

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

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

view plainprint?

1. plot = $.jqplot('graph', [data1,data2], {  
2.     stackSeries: true,  
3.     series:[  
4.       {  
5.         renderer:$.jqplot.BarRenderer,  
6.         rendererOptions:{  
7.           barMargin:60  
8.         }  
9.       },  
10.       {  
11.         renderer:$.jqplot.BarRenderer,  
12.         rendererOptions:{  
13.           barMargin:60  
14.         }  
15.       }  
16.     ]  
17.   });  

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に書き換え、任意のピクセル数を指定してみた。

view plainprint?

1. plot = $.jqplot('graph', [data1,data2], {  
2.     stackSeries: true,  
3.     series:[  
4.       {  
5.         renderer:$.jqplot.BarRenderer,  
6.         rendererOptions:{  
7.           barWidth:16  
8.         }  
9.       },  
10.       {  
11.         renderer:$.jqplot.BarRenderer,  
12.         rendererOptions:{  
13.           barWidth:16  
14.         }  
15.       }  
16.     ]  
17.   });  

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

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

これならママもOKだろう。

次回は円グラフをやろうと思う。

まだつづく。