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

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

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

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

view plain print ?

<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>

<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の表示や角度を付ける場合に必須

今回のグラフは、いくつか用意された選択肢を投票し、インクリメントした結果をただグラフに表示しているだけに過ぎない。しかし、前回までに説明をしていないオプションがいくつかあるので、それの説明をする。

今回新しく出てきたオプションはtickOptionsだ。実践3でtickRendererが出てきているので、何となく存在は理解していた人も射るかと思うが、今回は新しくtickの加工でtickOptionsを利用している。
具体的に説明を翻訳して見る事にする。翻訳対象は、plugins/jqplo.canvasAxisTickRenderer.jsだ。
コメントにはこう書いてある。

/**
* Class: $.jqplot.CanvasAxisTickRenderer
* Renderer to draw axis ticks with a canvas element to support advanced
* featrues such as rotated text. This renderer uses a separate rendering engine
* to draw the text on the canvas. Two modes of rendering the text are available.
* If the browser has native font support for canvas fonts (currently Mozila 3.5
* and Safari 4), you can enable text rendering with the canvas fillText method.
* You do so by setting the "enableFontSupport" option to true.
*
* Browsers lacking native font support will have the text drawn on the canvas
* using the Hershey font metrics. Even if the "enableFontSupport" option is true
* non-supporting browsers will still render with the Hershey font.
*/

残念ながら、この説明に出てくる「featrues」という単語は訳せなかった。たぶん「features」のタイポだと思う。featuresとして訳して見た結果、enableFontSupportプロパティの意味はこうなった。

より高度なレンダリングを実現する他に、テキスト回転の機能を実装します。このレンダラは、キャンバス上のテキストを描画するための別のレンダリングエンジンを使用します。テキストのレンダリングには2つのモードを使用する事が出来ます。

フォントの指定は、ブラウザがネイティブフォントをサポートしている場合、fillTextメソッドを使用して描画を有効にすることができます。その場合、enableFontSupportにtrueを指定する必要があります。ネイティブフォントをサポートしているのは、現在Mozila 3.5とおよびSafari4です。

たとえenableFOntSupportがtrueでも、サポートされていないブラウザではその効果は期待できません。

少々意訳も入っているのと、俺の勝手な解釈もあるかもしれないが、enableFontSupportはブラウザへの依存度が高いと言うことだ。
というわけで、FireFox（Mozilla3.5）とIE8、Opera10、Safari4、Google Chrome4、NetScape Navigator9で表示の確認をして見た。ちなみにプラットフォームはWindows XP SP3である。

FireFox 3.6

IE 8

Opera10

Safari 4

Google Chrome 4

Netscape 9

ご覧の通り、FireFox、Safari、Chrome以外はtickが表示されていない。ブラウザがサポートしていないのでこれは使用が無いことだ。

どう対処すれば良いかというと、ブラウザが対応していない以上、テキスト部分を英語で設定するしか無い。なんというアングロサクソニアン！

以上、ざっくりとjqPlotを説明し、PHP（CakePHP）と組み合わせてデータベース内容をグラフにして見たが、相当高機能なグラフライブラリであるため、今後も期待してウォッチして見たいと思う。

もうおわり。