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

今回は円グラフを描画させてみようと思う。
基本的にはPieレンダラープラグインを読み込み、それをレンダラーに指定すればOKなはずだ。
早速いってみよう。

まずは円グラフのプラグインであるPieRendererを読み込む。headタグ内を以下のように編集する。

view plain print ?

<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.pieRenderer.min.js"></script>

<!--[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.pieRenderer.min.js"></script>

これで円グラフを描画させる準備が整った。

次にデータを指定してみようと思う。
円グラフだからといって、データの合計が100になっている必要はない。好きなパラメータを好きなだけ指定することが出来るので、とりあえず以下のように設定してみた。

view plain print ?

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

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

それから円グラフなので、描画領域を正方形に変更してみた。
後で凡例を表示させるなど、編集をする場合、適宜サイズを調整しておこう。

view plain print ?

<body>
<h1>jqPlot Test 3</h1>
<div id="graph" style="width:400px;height:400px;margin:30px;"></div>
</body>

<body>

<h1>jqPlot Test 3</h1>
<div id="graph" style="width:400px;height:400px;margin:30px;"></div>

</body>

このままではまだ折れ線グラフのままだ。
plotオブジェクトにrendererプロパティを設定し、PieRendererプラグインで描画させてみよう。
今回は全体設定であるseriesDefaultsプロパティを使ってみた。

view plain print ?

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

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

さて、これだけで画面に円グラフが表示されたと思うが、いかがだろうか。

折れ線グラフや棒グラフに対して、シェイプが視覚的に単純なため、かなりそっけないデザインで描画されている。ここら辺を何とかしようと思う。
まずは色を変更してみる。色を変更するには、seriesColorsプロパティを使い、配列で16進数指定すればよい。データが6個あるので、6種類のみ用意してみた。

view plain print ?

plot = $.jqplot('graph', [data1],{
seriesDefaults:{
renderer:$.jqplot.PieRenderer
},
seriesColors:[
'#002244',
'#224466',
'#446688',
'#6688aa',
'#88aacc',
'#aaccee'
]
});

plot = $.jqplot('graph', [data1],{
    seriesDefaults:{
      renderer:$.jqplot.PieRenderer
    },
    seriesColors:[
      '#002244',
      '#224466',
      '#446688',
      '#6688aa',
      '#88aacc',
      '#aaccee'
    ]
  });

データに対して色の数が足りない場合、繰り返し使われるので、隣り合ったデータが同じ色になってしまう場合がある。それを避けるため、できればあらかじめデータ数より多めに色を登録しておくとよいだろう。
この状態でブラウザで見てみると、こうなった。

冬にみたくない色合いになった。個人的に好きな配色ではないが、とりあえずこの状態でいろいろ進めてみよう。
次に、よくある円グラフの分断をやってみようと思う。隣り合ったデータにマージンをつけることが出来る。
具体的には、rendererOptionsでsliceMarginプロパティを設定するだけでOKだ。

view plain print ?

plot = $.jqplot('graph', [data1],{
seriesDefaults:{
renderer:$.jqplot.PieRenderer,
rendererOptions:{
sliceMargin:10
}
},
seriesColors:[
'#002244',
'#224466',
'#446688',
'#6688aa',
'#88aacc',
'#aaccee'
]
});

plot = $.jqplot('graph', [data1],{
    seriesDefaults:{
      renderer:$.jqplot.PieRenderer,
      rendererOptions:{
        sliceMargin:10
      }
    },
    seriesColors:[
      '#002244',
      '#224466',
      '#446688',
      '#6688aa',
      '#88aacc',
      '#aaccee'
    ]
  });

この状態でブラウザで見てみると、以下のようになる。

円グラフはそもそもがそっけないモデルでもあるので、rendererOptionsでいろいろ設定することにより、にぎやかしを行うとよいだろう。さらにいろいろいじってみる。今度はパイの塗りつぶしをやめてみる。fillプロパティに対してfalseを設定だ。

view plain print ?

plot = $.jqplot('graph', [data1],{
seriesDefaults:{
renderer:$.jqplot.PieRenderer,
rendererOptions:{
sliceMargin:10,
fill:false
}
},
seriesColors:[
'#002244',
'#224466',
'#446688',
'#6688aa',
'#88aacc',
'#aaccee'
]
});

plot = $.jqplot('graph', [data1],{
    seriesDefaults:{
      renderer:$.jqplot.PieRenderer,
      rendererOptions:{
        sliceMargin:10,
        fill:false
      }
    },
    seriesColors:[
      '#002244',
      '#224466',
      '#446688',
      '#6688aa',
      '#88aacc',
      '#aaccee'
    ]
  });

この状態でブラウザで見てみると、こうなる。

中心が少々不安定なレンダリングになってしまうが、かなり興味深い見せ方になった。ただこのままだとパイの線が細いので、少々太くしてみる。線の太さはrendererOptionsにlineWidthプロパティで設定可能だ。ここでは5にしてみた。

view plain print ?

plot = $.jqplot('graph', [data1],{
seriesDefaults:{
renderer:$.jqplot.PieRenderer,
rendererOptions:{
sliceMargin:10,
fill:false,
lineWidth:5
}
},
seriesColors:[
'#002244',
'#224466',
'#446688',
'#6688aa',
'#88aacc',
'#aaccee'
]
});

plot = $.jqplot('graph', [data1],{
    seriesDefaults:{
      renderer:$.jqplot.PieRenderer,
      rendererOptions:{
        sliceMargin:10,
        fill:false,
        lineWidth:5
      }
    },
    seriesColors:[
      '#002244',
      '#224466',
      '#446688',
      '#6688aa',
      '#88aacc',
      '#aaccee'
    ]
  });

この状態でブラウザで見てみると、以下のようになる。

やはり中心がおかしくなってしまう。これはcanvasの限界か、ロジックの問題だろうか。

何れにせよ、ここまで簡単な設定で複雑なグラフを描画出来るという意味では、業務にも個人的にもかなり有用だと思うので、気にせず次に進もう。

さすがに円グラフだけ「ドォォォォン！」と表示されても、何の意味があるのかが不明になってしまうので、凡例をつけてみようと思う。
jqPlotの解説初期にやったように、データ内にラベルを追加してみる。

view plain print ?

var data1 = [['PS2',5],['PS3',1],['DSi',6],['XBox360',5],['Wii',7],['PSP',3]];

var data1 = [['PS2',5],['PS3',1],['DSi',6],['XBox360',5],['Wii',7],['PSP',3]];

これで凡例を表示させるための準備が整った。
次に凡例の指定だ。これは以前行ったとおり、legendプロパティを設定することで表示が可能になる。
※先ほど行ったオプション指定は見た目が悪いので、塗りつぶしと線の太さ部分は削除してある。

view plain print ?

plot = $.jqplot('graph', [data1],{
seriesDefaults:{
renderer:$.jqplot.PieRenderer,
rendererOptions:{
sliceMargin:10
}
},
seriesColors:[
'#002244',
'#224466',
'#446688',
'#6688aa',
'#88aacc',
'#aaccee'
],
legend:{
show:true
}
});

plot = $.jqplot('graph', [data1],{
    seriesDefaults:{
      renderer:$.jqplot.PieRenderer,
      rendererOptions:{
        sliceMargin:10
      }
    },
    seriesColors:[
      '#002244',
      '#224466',
      '#446688',
      '#6688aa',
      '#88aacc',
      '#aaccee'
    ],
    legend:{
      show:true
    }
  });

この状態でブラウザで見てみると、以下のようになる。

なお、上記グラフの凡例はフィクションである。

ところで、各パイの上にパラメータを表示させたいのだが、時間がないため一旦ここで終わりにしておく。
ひとまずこれでjQueryグラフライブラリ「jqPlot」の説明は終わりにして、次回からはPHP（CakePHP）からグラフを表示させる内容を書いていこうと思う。

まだつづく。