仕事でjQueryのグラフ描画に特化したプラグイン”jqplot”を使ったので、使い方を備忘録として書き留めておく。環境としてはCakePHP2.2.2にjqplot1.0.4とjqplotに付属してきたjQueryを組み込んで使用した。
CakePHP2.xへの組み込み方としては、簡単な説明になってしまうが、jsフォルダ以下にjQueryとjqplotを配置し、Viewで以下のように読み込めば良い。
<?php
echo $this->Html->script('jquery');
?>
<?php
echo $this->Html->script('jquery.jqplot');
?>
jqplotはjQueryのプラグインという位置付けなので、使用する為にはjQuery本体の準備が必要である。
グラフを描いてみる
積み上げ棒グラフを描いてみた。これは、ゲームの継続率の詳細を表すと仮定した内容のグラフである。棒グラフの上に継続率、棒グラフの色が継続率の分布、棒グラフの下に日付、折線が登録者数を表している。
以下、CakePHPに組み込んだ際のコードになる。分かり辛くなるのを避ける為に動的なコードは静的なものに置き換えてある。冒頭のjsファイルとcssの読み込みのパスさえ合っていれば、そのままコピペして使用可能である。
<?php echo $this->Html->css('jquery.jqplot'); ?>
<!--[if lt IE 9]><?php echo $this->Html->script('excanvas'); ?><![endif]-->
<?php echo $this->Html->script('jquery'); ?>
<?php echo $this->Html->script('jquery.jqplot'); ?>
<?php echo $this->Html->script('plugins/jqplot.barRenderer'); ?>
<?php echo $this->Html->script('plugins/jqplot.pointLabels'); ?>
<?php echo $this->Html->script('plugins/jqplot.highlighter'); ?>
<?php echo $this->Html->script('plugins/jqplot.cursor'); ?>
<?php echo $this->Html->script('plugins/jqplot.categoryAxisRenderer'); ?>
<script type="text/javascript">
$(document).ready(function() {
//パーセンテージを表す積み重ね棒グラフの変数
var p1 = [67, 50, 58, 40, 35, 33, 38, 2.76497]; //0%
var p2 = [7, 5, 3, 9, 12, 12, 10, 7.83410]; //1~10%
var p3 = [2, 3, 5, 6, 8, 6, 8, 9.67741]; //11~20%
var p4 = [1, 7, 2, 7, 10, 8, 10, 12.90322]; //21~30%
var p5 = [2, 6, 7, 12, 11, 14, 9, 16.12903]; //31~40%
var p6 = [7, 5, 3, 4, 5, 2, 4, 13.82488]; //41~50%
var p7 = [2, 3, 5, 3, 3, 4, 4, 11.98156]; //51~60%
var p8 = [1, 7, 2, 4, 4, 3, 6, 9.67741]; //61~70%
var p9 = [2, 6, 7, 9, 7, 9, 4, 6.45161]; //71~80%
var p10 = [7, 5, 3, 5, 4, 4, 4, 5.52995]; //81~90%
var p11 = [2, 3, 5, 1, 1, 5, 3, 3.22580]; //91~100%
//日付ごとのユーザー数を表す線グラフの変数
var sumUser = [[1, 40], [2, 21], [3, 820], [4, 60], [5, 80], [6, 90], [7, 100], [8, 110] ];
// chart data 積み重ね棒グラフの継続率分布
var dataArray = [ p1, p2, p3, p4, p5, p6, p7, p8, p9, p10, p11, sumUser ];
// x-axis ticks 登録日
var xticks = [ '12月', '1月', '02-01', '02-02', '02-03', '02-04', '02-05', '02-06' ];
// x2-axis ticks 登録日ごとの継続率
var x2ticks = [ '12.65%', '9.82%', '7.65%', '9.2%', '8.4675%', '11.2525%', '12.5678%', '14.5432%' ];
// chart rendering options
var options = {
stackSeries: true,
title: '継続率',
cursor: {
show: true,
zoom: false,
looseZoom: false,
showTooltip: false
},
legend: {
show: true,
location: 'ne',
placement: 'outsideGrid'
},
series: [
{label: '0%', useNegativeColors: false},
{label: '1~10%', useNegativeColors: false},
{label: '11~20%', useNegativeColors: false},
{label: '21~30%', useNegativeColors: false},
{label: '31~40%', useNegativeColors: false},
{label: '41~50%', useNegativeColors: false},
{label: '51~60%', useNegativeColors: false},
{label: '61~70%', useNegativeColors: false},
{label: '71~80%', useNegativeColors: false},
{label: '81~90%', useNegativeColors: false},
{label: '91~100%', useNegativeColors: false},
{
label: '登録者数'
disableStack : true,
renderer: jQuery.jqplot.LineRenderer,
lineWidth: 2,
pointLabels: { show: false },
color: '#FF7D7D',
markerOptions: { size: 5, color: 'red' },
xaxis: 'x2axis',
yaxis: 'y2axis'
}
],
seriesDefaults: {
renderer:jQuery.jqplot.BarRenderer,
rendererOptions: {
barWidth: 35,
shadowAlpha: 0.03,
fillToZero: true,
highlightMouseOver: false
},
pointLabels: {show: true}
},
axes: {
xaxis: {
label:"日付",
renderer: jQuery.jqplot.CategoryAxisRenderer,
labelOptions: { fontSize: '20pt' },
ticks: xticks
},
x2axis: {
label:"継続率(%)",
renderer: jQuery.jqplot.CategoryAxisRenderer,
labelOptions: { fontSize: '20pt' },
ticks: x2ticks
},
yaxis: {
label:"継\n続\n率\n分\n布\n(%)",
labelOptions: { fontSize: '20pt' },
tickOptions: { formatString: '%.2f%' },
min: 0, max: 100, numberTicks:11
},
y2axis: {
label:"登\n録\n者\n数",
labelOptions: { fontSize: '20pt' },
tickOptions: { formatString: '%d人' },
min: 0
}
},
highlighter: {
show: true,
showLabel: true,
tooltipAxes: 'y',
sizeAdjust: 7.5 ,
tooltipLocation : 'ne'
}
};
jQuery.jqplot('graph', dataArray, options);
});
</script>
<div id="graph" style="height:600px;width:800px;margin:30px;">