技術の犬小屋

Webプログラミングを餌に生きる犬のメモ帳

Posts in the ライブラリ category

仕事でjQueryを使っている。jQueryによるAjaxの使い方を覚えたのでメモしておく。
 

Ajaxとは

Webブラウザに実装されているJavaScriptのHTTP通信機能を使って、Webページのリロードを伴わずにサーバとXML形式のデータのやり取りを行って処理を進めていく対話型Webアプリケーションの実装形態である。
 

jQueryによるAjaxの使い方

Ajaxを使うときの大まかな流れ

jQueryでAjaxを使うときは以下のような流れで利用する。

  1. DOMでHTMLから要素を取得する。
  2. 取得したHTML要素に対してイベントを登録する。
  3. ユーザのアクションに応じてイベントが実行される。
  4. イベントの実行をトリガーにしてAjaxにより、通信・処理を行う。

 

簡単な例
$('#button1').click(function(){
  $.ajax({
    url: "ajax-test.html",
    dataType: "html",
    cache: false,
  }).done(function(data, textStatus) {
    // 成功したとき
    // data にサーバーから返された html が入る
  }).fail(function(xhr, textStatus, errorThrown) {
    // エラー処理
  });
});

 
$とは、jQueryという文字列の略記法である。すなわち、$記号を書くことによってjQueryへの命令を行うことが出来る。
 
('#button1')によってDOM操作を行い、Javascriptの呼び出し元のHTMLからid="button1"が指定されている要素を取得している。
 
.clickによってイベントの登録を行い、id="button1"の要素がクリックされた際にメソッド(function(){…})の呼び出しを行う。
 
メソッド内に記述されたAjaxの処理によって、サーバー上のajax-test.htmlの内容が取得され、data変数に格納される。
 
ajax-test.htmlの取得に成功した場合には、メソッドチェーンとして記述されたdone(function(data, textStatus) {…})が呼び出される。
 
ajax-test.htmlの取得に失敗した場合には、メソッドチェーンとして記述されたfail(function(xhr, textStatus, errorThrown) {…})が呼び出される。
 
メソッド内に記述されたAjaxの処理では、以下の3つのプロパティを指定している。この他にも多くのプロパティが用意されているので、詳しくはリファレンスを参照してほしい。

  1. url
  2. リクエストを送信するURLを指定する。初期値は、現在のページのURLとなる。例えば、今回はajax-test.htmlというファイルの内容を取得したいので、このように指定している。

  3. dataType
  4. サーバーから返されるデータの型を指定する。初期値はxml,json,script,htmlからjQueryがMIME typeを元に判別する。

  5. cache
  6. キャッシュを有効にするか否かをtrueもしくは、falseで指定する。初期値はtrue、ただし、dataTypeが’script’または’jsonp’の場合は、falseとなる。

 
 
以上
 
 
参考
Ajaxとは 【 Asynchronous JavaScript + XML 】 – 意味/解説/説明/定義 : IT用語辞典
Ajax – jQuery 入門
jQuery.ajax() | jQuery API Documentation

仕事で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;">

 
 
以上
 
 
参考
jqPlot – jQuery プラグイン