トーハム紀行

WHAT'S NEW?

ラベル jqPlot の投稿を表示しています。すべての投稿を表示

今回で「PHP とjQueryライブラリ「jqPlot」で綺麗なグラフを描画する」シリーズは最終回にしたおきたい。
というわけで、vote.ctpの説明をする。

現状のvote.ctpは以下のようになっているはずだ。

[/app/views/quickpolls/vote.ctp]

<div id="graph" style="width:600px;height:300px;margin:30px;"></div>
<script type="text/javascript">
  var data = [<?php echo $data;?>];
  plot = $.jqplot('graph', [data], {
    title: 'モビルスーツ人気投票',
    series:[{renderer:$.jqplot.BarRenderer}],
    axes: {
      xaxis: {
        renderer: $.jqplot.CategoryAxisRenderer,
        tickRenderer: $.jqplot.CanvasAxisTickRenderer,
        tickOptions: {
          enableFontSupport: true,
          angle: -30
        }
      }
    }
  });
</script>

読みこんでいるプラグインは以下になる。

プラグイン名	説明
jqplot.barRenderer.min.js	棒グラフを描画するのに必須
jqplot.categoryAxisRenderer.min.js	カテゴリを反映させるために必須
jqplot.canvasAxisTickRenderer.min.js	tickの表示や角度を付ける場合に必須

ビュースクリプトでビジネスロジックを書いてしまうと言うのがどうしてダメなのか、もしくはどうして気持ちが悪いのか、というのを考えて見よう。

そもそもPHP君からしてみれば、動かしているPHPファイルがMだろうがVだろうがCだろうが、全く関係ない。もっとプリミティブな階層で動かしているので、そんな話は全く理解してないはず。

しかし、人間から見た場合、情報を扱うレイヤ、表示するレイヤ、それらを管理するレイヤという風に分けた方が、脳みそが分かりやすいからだ。

なので、只の思想と言うことになる。只の思想を実装に代えた物がMVCフレームワークだ。だからビュースクリプトにビジネスロジックを書くことに対しては、極端な話、只の個人の好き嫌いと言う事になる。

それを、「MVCフレームワークだから当然Cでビジネスロジックを実装し、Vは表示のみだろう」という話に持って言ってもし様が無いわけで、正直、全く理由になってはいない。何しろ只の好みの問題なのだから。

とはいえ、せっかく人間が作ったこれらの思想、CakePHPで言うところの規約にも当てはまるが、自ら破るのもなんだか後味が悪いし、どうせ複雑なものであるならば、最初は正攻法で攻めて見たいと思うのは多くの人がそう思っても否定出来ないと思う。

CakePHPを使用して、jqPlotの表示テストを行う。
用意するものは当然としてCakePHPだ。バージョンは安定している1.2を使う。
プラットフォームはLinuxだが、XAMPPなどを使用している人は適宜自分の環境に合わせて構築していただこう。XAMPPは止むを得ない場合以外は使ってないので良く分からんのだ。

CakePHPをダウンロード後展開し、最低限の設定が終わっていることを前提とする。そしてアクセスする際のURLは

http://example.com/cake_test/

とする。

ドキュメントルート内の「/cake_test」を仮想的なドキュメントルートにしたいので、CakePHPにそれを教えておかないとマズい事になる。どういうことかと言うと、CSSやJavaScript、画像などの絶対パスがおかしくなる。/imgなどとすると、/cake_test/imgではなく、/imgを見てしまうからだ。これはmod_rewrite側で指定するのが楽だ。
各「.htaccess」にRewriteBaseを記述しておく必要があるので、以下の様に編集しておく。

変更ファイル	追記内容
/cake_test/.htaccess	RewriteBase /cake_test
/cake_test/app/.htaccess	RewriteBase /cake_test/app
/cake_test/app/webroot/.htaccess	RewriteBase /cake_test/app/webroot

これで絶対パスが正しく認識されるようになる。mod_rewrite便利すぎ。

次にデータベースだ。データベース名はjqplotとして作る。

create database `cake_test` default character set utf8 collate utf8_general_ci;

さて、jqPlotの大まかな概要と実装方法が分かったことで、これを実用させてみようと思う。
使うフレームワークはCakePHPだ。よって、言語はPHPと言う事になる。

実際に作業に入る前に、俺の考えを少しだけ、説明したいと思う。

以前までWebアプリはPerl（当時はバージョン4）で開発していたが、CGIという仕組み上、どうしても納得行くレスポンスが取れず、デバグもやりにくかった。しかしPHP（当時はバージョン3）が登場し、一気にPHPでの開発にシフトした俺だが、今ではむしろフレームワークを使うことによる余計なプロセスが、個人的にPerlをやっていた時代よりWebサーバに負担をかけているのを自覚し始めている。
※1個のクエリで済むところを、20個ほどのクエリが走っているときもある

要するにフレームワークは開発者のエゴでしかないわけだ。

O/Rマッピングで多様なDBと接続！
ビジネスロジックとビューの完全分離！

などなど。

個人的には時代を考慮した結果、人間にタスクが割り当てられない状態で開発するのが良いと考え、プロシージャルじゃなければなんでもいいわけだ。しかしそれがフレームワークと直結しているとは思っていない。

これに関しては、ゲーム開発を経験したことがある人はご理解いただけると思う。
メモリの使い方に関する思想など、正直、ゲーム開発とWeb開発は正反対といってよい。Webはメモリをじゃぶじゃぶ使いすぎる。さらにApacheの勉強が足りない人が意外に大勢いることが分かった（もちろん俺だって勉強中だ）。

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

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

<!--[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になっている必要はない。好きなパラメータを好きなだけ指定することが出来るので、とりあえず以下のように設定してみた。

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

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

<body>

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

</body>

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

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

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

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

<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
    }
  });

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

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

さて、次にインタフェースの挙動をカスタマイズしてみよう。
まずは、グラフのデータのポインタにマウスオーバーすると、ツールチップを表示するようにして見る。
これにはhighlighterというプラグインが必要になる。
まずは読みこんでみる。headerタグ内に以下を追記する。

<script type="text/javascript" src="plugins/jqplot.highlighter.min.js"></script>

これでツールチップを表示するハイライト機能が読みこまれた。
次に、ハイライト機能を実際に記述してみよう。
highlighterプロパティに、ツールチップの位置、フォーマットなどが指定可能だ。

plot = $.jqplot('graph', [data1, data2], {
    title:'会員サイト アクセス数',
    legend:{
      show:true,
      location: 'nw',
      yoffset: 6
    },
    series:[
      {label:'メンバー'},
      {label:'ビジター'}
    ],
    axes: {
      xaxis:{
        renderer: $.jqplot.DateAxisRenderer,
        min:'2010/01/01',
        max:'2010-01-04',
        numberTicks: 4,
        label: '過去7日分'
      },
      yaxis:{
        min:0,
        max:12,
        label:'アクセス数'
      }
    },
    highlighter: {
      tooltipLocation: 'n',
      tooltipFormatstring: '<strong>%d</strong>'
    }
  });

この状態でブラウザでグラフを表示させ、データのポインタにマウスを当ててみよう。
ツールチップがフェードインして表示されるようになった。

さて、次はグラフに凡例を表示させてみよう。その前に、jqPlot付属のCSSを適用させておく。これできれいに凡例が表示できるようになる。

もっとも、最初からCSSを読み込んでおけば問題はないが、今回は流れ的にこの時点でCSSを実装することにした。
というわけで、headタグ内を以下のように編集してみた。

<title>jqPlot テスト</title>
<link rel="stylesheet" type="text/css" href="jquery.jqplot.css" />
・・・

これできれいなデザインでグラフを描画できるようになる。FireFoxとIEで描画の差がほとんど無くなるので、以後はFireFox 3.5のキャプチャを使用することにする。

さて、このグラフの左上に、「アクセス数」などの凡例を表示させて見る。ただ、データが1個だと凡例も1個になり、少々さびしいので、まずはデータを2個に増やすことにした。

さて、前回はグラフの表示オプションは一切指定せず、デフォルト状態で表示してみた。
これはこれでキレイなグラフだが、いろいろ足りないことがある。ざっとあげると、

軸の数値が半端
凡例が無い
棒グラフなどの別の形式も使用したい

などがあるとおもう。
まずは横軸の数値を、日付に変更してみよう。

日付をティッカーとして表示するには、面倒だがプラグインを読みこまないといけない。このjqPlotは、基本機能以外はほぼすべてプラグインとして実装する形式なので、scriptタグをたくさん記述する羽目になる。まぁjQueryを使う時点であきらめなければいけない要素でもあるのだが、素直に実装してみよう。

まず、plugins/jqplot.dateAxisRenderer.min.jsを読みこむように、headタグ内にscriptタグを追記する。必ず、jquery.jqplot.jsもしくはjquery.jqplot.min.jsの後に読みこむように記述する事。

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

これで準備が整った。
次に、jqplotメソッドの3番目の引数として、JSON形式で各種プロパティを設定して行く。プロパティは、axesという名前が付いている。これは軸、つまり英語で言うところのaxisの複数形だ。axes内にx座標の軸、y座標の軸を設定する事が出来るようになっている。

Webサイト上にグラフを表示させたいとき、最初に思いつくのがpChartだ。PHPのグラフライブラリで、非常にカスタマイズ性に優れている。ストリームでグラフ画像を出力することも出来る。

他にはFlashベースでXMLを読み込んで表示させる方法もあるが、今のところフリーで使えるFlashグラフはあまり良いものを見つけられてない。

今回、今まで手を出してなかったJavaScriptによるグラフ描画を試してみようと思う。
個人的にjQueryを多用するので、jQuery専用のグラフライブラリ「jqPlot」を使用してみる。

jqPlotは大前提として、