まずは、グラフのデータのポインタにマウスオーバーすると、ツールチップを表示するようにして見る。
これには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>'
- }
- });
ツールチップがフェードインして表示されるようになった。
現状だとツールチップにはxaxis（横軸）とyaxis（縦軸）のデータが表示されるようになっているが、たとえばアクセス数だけを表示したい場合の方が多いと思う。
その場合、highlighterプロパティに、tooltipAxesを設定し、表示したい軸を指定する。具体的には、yaxisのアクセス数を表示したければyを、xaxisの日付を表示したければxを代入する。両方表示したい場合はbothを指定だ。
- highlighter: {
- tooltipLocation: 'n',
- tooltipAxes: 'y',
- tooltipFormatstring: '<strong>%d</strong>'
- }
ただし、これだけでは以下の図のように、「6.0」と表示したいところ「6.0,」と、余計なカンマが表示されてしまう。
- highlighter: {
- tooltipLocation: 'n',
- tooltipAxes: 'y',
- tooltipSeparator: '',
- tooltipFormatstring: '<b>%d</b>',
- }
ちなみにtooltipStringに指定してある「%d」だが、これはsprintf関数で使われるフォーマットがそのまま使えるようになっているそうだ。sprintfはC言語にもPHPにも存在するので、詳しくは各言後のマニュアルを読んでいただきたい。参考までに、%sが文字列、%dが整数、%fが浮動少数だ。
SmartにPerl版の詳しい解説があるので参考にされたし。
次に、いくつかデータを増やしてみる。
まずデータ自体を4日から7日へ、やや右肩上がり風に、最高値も増やしてみた。
軸も4つから7つに増やしてみた。
- $(document).ready(function(){
- var data1 = [['2010/01/01',2],['2010/01/02',4],['2010/01/03',6],['2010/01/04',8],['2010/01/05',12],['2010/01/06',10],['2010/01/07',14]];
- var data2 = [['2010/01/01',5],['2010/01/02',6],['2010/01/03',4],['2010/01/04',12],['2010/01/05',11],['2010/01/06',9],['2010/01/07',15]];
- 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-07',
- numberTicks: 7,
- label: '過去7日分'
- },
- yaxis:{
- min:0,
- max:15,
- label:'アクセス数'
- }
- },
- highlighter: {
- tooltipLocation: 'n',
- tooltipAxes: 'y',
- tooltipSeparator: '',
- tooltipFormatstring: '<strong>%d</strong>',
- }
- });
- });
なので、こういう場合、いくつか別の解決策をとる。
- 年を別のとこに表示する
- 1桁の際頭に0を付けない
- 文字を小さくする
もしレイアウトを変更するのであれば、それは最小限にとどめるべきだと思うが、そもそもレイアウトを変更するのはやっぱりやっつけ感が満載で寝覚め悪いだろう。
というわけで、上記選択肢にはないが、
- tickを回転させる
使うライブラリはcanvasTextRendererとcanvasAxisTickRendererの二つだ。まずは例によってheadタグ内に記述する。
読みこむ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.dateAxisRenderer.min.js"></script>
- <script type="text/javascript" src="plugins/jqplot.categoryAxisRenderer.min.js"></script>
- <script type="text/javascript" src="plugins/jqplot.highlighter.min.js"></script>
- <script type="text/javascript" src="plugins/jqplot.canvasTextRenderer.js"></script>
- <script type="text/javascript" src="plugins/jqplot.canvasAxisTickRenderer.min.js"></script>
実際に回転させる場合、角度を設定しないといけないのだが、基本的にコンピュータは度ではなくラジアンで指定する場合が多い。しかしjqPlotでは度の指定が可能になっている。しかも時計回りだ。すばらしい。
アナログ時計などでおなじみの感覚で、好きな角度を指定する事が出来るようになっている。
今回は30度を設定してみよう。
まず、角度を付けて回転させたいtickはx軸にあるため、xaxisプロパティ内でプラグインを読みこむようにする。
- xaxis:{
- renderer: $.jqplot.DateAxisRenderer,
- tickRenderer: $.jqplot.CanvasAxisTickRenderer,
- min:'2010/01/01',
- max:'2010-01-07',
- numberTicks: 7,
- label: '過去7日分',
- },
というわけで、さっそくxaxisに角度を設定してみよう。
- xaxis:{
- renderer: $.jqplot.DateAxisRenderer,
- tickRenderer: $.jqplot.CanvasAxisTickRenderer,
- min:'2010/01/01',
- max:'2010-01-07',
- numberTicks: 7,
- label: '過去7日分',
- tickOptions: {
- angle: 30
- }
- },
調子に乗って次へ進んでみる。次は、ドラッグして選択された領域を拡大して描画するという、驚きの機能だ。
これはつまりどういうことかと言うと、まずグラフ内の任意の場所からドラッグを開始し、拡大したい領域まで引っ張り、マウスを放すと、選択された領域のみが、現在の描画エリアいっぱいに表示される、と言うものだ。これはすごい。
ドラッグ開始
拡大完了
とはいえ、すばらしい機能であることは確実なので、早速実装してみよう。
拡大するにはzoomプラグインが必要か、と思われたが、実はカーソル系のプラグインになっている。headタグ内にjqplot.cursor.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.dateAxisRenderer.min.js"></script>
- <script type="text/javascript" src="plugins/jqplot.categoryAxisRenderer.min.js"></script>
- <script type="text/javascript" src="plugins/jqplot.highlighter.min.js"></script>
- <script type="text/javascript" src="plugins/jqplot.canvasTextRenderer.js"></script>
- <script type="text/javascript" src="plugins/jqplot.canvasAxisTickRenderer.min.js"></script>
- <script type="text/javascript" src="plugins/jqplot.cursor.js"></script>
カーソルプラグインを使用するので、プロパティはcursorとなる。このcursorを使うと、グラフ上にあるマウスポインタがクロスヘアになる。ただこれだけなのだが、zoomプロパティをtrueにすることで、この拡大表示機能が直ぐに動くようになるという、非常に簡単な実装が可能になっている。
- plot = $.jqplot('graph', [data1, data2], {
- title:'会員サイト アクセス数',
- legend:{
- show:true,
- location: 'nw',
- yoffset: 6
- },
- series:[
- {label:'メンバー'},
- {label:'ビジター'}
- ],
- axes: {
- xaxis:{
- renderer: $.jqplot.DateAxisRenderer,
- tickRenderer: $.jqplot.CanvasAxisTickRenderer,
- min:'2010/01/01',
- max:'2010-01-07',
- numberTicks: 7,
- label: '過去7日分',
- tickOptions: {
- angle: 30
- }
- },
- yaxis:{
- min:0,
- max:15,
- label:'アクセス数'
- }
- },
- highlighter: {
- tooltipLocation: 'n',
- tooltipAxes: 'y',
- tooltipSeparator: '',
- tooltipFormatstring: '<strong>%d</strong>',
- },
- cursor:{
- zoom:true
- }
- });
おそろしや。
ちなみにだが、このままでは拡大するだけで、元に戻せない。人によってはページをリロードしてしまう可能性もあるため、原寸サイズに戻すメソッドが必要になる。
幸いにもjqPlotには、ズームをリセットするresetZoom()メソッドが実装されているので、このメソッドを走らせればよい。
問題は、どのタイミングで実行するかだ。画面に「サイズをリセット」ボタンをつけても良いが、1つの画像エリアとして確保できているHTMLコンテナ内に、さらに別のエレメントを追加するのは、レイアウト的にもよろしくないし、特定のエレメントが別のエレメントを操作する、というのも、10年前のショボいWebアプリみたいで個人的に好きじゃない。
というわけで、拡大後、グラフをダブルクリックすると元に戻るようにしてみようとおもっていろいろ試したら、なんとデフォルトでダブルクリックで元に戻るではないか。
- plot.dbclick(function(){
- plot.resetZoom();
- });
と言うわけで、現在までの全てのソースコードは、以下のようになっている。
- <?xml version="1.0" encoding="UTF-8"?>
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <meta http-equiv="Content-Script-Type" content="text/javascript" />
- <meta http-equiv="Content-Style-Type" content="text/css" />
- <title>jqPlot テスト</title>
- <link rel="stylesheet" type="text/css" href="jquery.jqplot.css" />
- <!--[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>
- <script type="text/javascript" src="plugins/jqplot.categoryAxisRenderer.min.js"></script>
- <script type="text/javascript" src="plugins/jqplot.highlighter.min.js"></script>
- <script type="text/javascript" src="plugins/jqplot.canvasTextRenderer.js"></script>
- <script type="text/javascript" src="plugins/jqplot.canvasAxisTickRenderer.min.js"></script>
- <script type="text/javascript" src="plugins/jqplot.cursor.js"></script>
- <script type="text/javascript">
- $(document).ready(function(){
- var data1 = [['2010/01/01',2],['2010/01/02',4],['2010/01/03',6],['2010/01/04',8],['2010/01/05',12],['2010/01/06',10],['2010/01/07',14]];
- var data2 = [['2010/01/01',5],['2010/01/02',6],['2010/01/03',4],['2010/01/04',12],['2010/01/05',11],['2010/01/06',9],['2010/01/07',15]];
- plot = $.jqplot('graph', [data1, data2], {
- title:'会員サイト アクセス数',
- legend:{
- show:true,
- location: 'nw',
- yoffset: 6
- },
- series:[
- {label:'メンバー'},
- {label:'ビジター'}
- ],
- axes: {
- xaxis:{
- renderer: $.jqplot.DateAxisRenderer,
- tickRenderer: $.jqplot.CanvasAxisTickRenderer,
- min:'2010/01/01',
- max:'2010-01-07',
- numberTicks: 7,
- label: '過去7日分',
- tickOptions: {
- angle: 30
- }
- },
- yaxis:{
- min:0,
- max:15,
- label:'アクセス数'
- }
- },
- highlighter: {
- tooltipLocation: 'n',
- tooltipAxes: 'y',
- tooltipSeparator: '',
- tooltipFormatstring: '<strong>%d</strong>',
- },
- cursor:{
- zoom:true
- }
- });
- });
- </script>
- </head>
- <body>
- <h1>jqPlot Test</h1>
- <div id="graph" style="width:400px;height:300px;margin:30px;"></div>
- </body>
- </html>
※【追記】横軸を7日に増やしたのにラベルが「過去4日分」 になっていたのでソースコードのみ修正
まだつづく
facebook
twitter
google+
fb share