[jquery] jqplotを使い始めて、最初に知っておくと良い感じのこと
ベーシック
最小限の読みこみ設定
<!DOCTYPE html> <html> <head> <!--[if lt IE 9]><script language="javascript" type="text/javascript" src="./jquery/dist/excanvas.js"></script><![endif]--> <script type="text/javascript" src=".jquery.min.js"></script> <script type="text/javascript" src="jquery.jqplot.min.js"></script> (以下略)
最小限の表示
- jquery.jqplot.min.js
- 基本は折れ線グラフ。
$.jqplot(selector, data) selector: グラフを表示するターゲットDOM。DOMは、表示する大きさを予め指定されている必要がある。 data: 1系列は、配列の配列。配列化したそれぞれの系列を順に配列として渡す。
- 例
<div id='target_for_jqplot' style='width:400px; height:300px;'></div> <script type='text/javascript'> $.jqplot( 'target_for_jqplot', [ [[1, 10], [2, 20], [3, 30], [4, 40], [5, 50], [6, 60]], [[1, 2], [2, 4], [3, 8], [4, 16], [5, 32], [6, 64]] ] ) </script>
- 凡例はデフォルトoff
- グラフのタイトルもデフォルトoff
オプションの設定
- $.jqplotの第3引数にオプションを設定するための連想配列を設定する。
$.jqplot(selector, data, options) options: 連想配列を設定する。
- optionsのデフォルト設定は、jqplotのdocsを参照
- 例
<div id='target_for_jqplot' style='width:400px; height:300px;'></div> <script type='text/javascript'> $.jqplot( 'target_for_jqplot', [ [[1, 10], [2, 20], [3, 30], [4, 40], [5, 50], [6, 60]], [[1, 2], [2, 4], [3, 8], [4, 16], [5, 32], [6, 64]] ], { title: '折れ線', axes: {yaxis: {min: -200, max: 200}}, series:[ {color: '#48d1cc'}, {color: '#a4c639'} ] } ) </script>
ベーシックオプション
- seriesColors
- 系列別の色を設定する。Array
- seriesColorsのsizeは、必ずしも系列の数に合っている必要はない。系列の数がseriesColorsよりも多い場合は、最初の色から再度利用される。
- axesDefaults
- グラフの全ての軸のデフォルト値を設定する。
- axis向けのrenderingプラグインの設定などをまとめてしまうと良い
- 目盛りの表示向けプラグインなど。
- 個別設定は、axesで行う。
- メモリの最大値、最小値の設定は可能だが、特別な基準がなければデフォルト値の autoscale: true に任せたほうが良い。
- 2軸評価の時に、autoscale: trueが設定されていないと、メモリがずれてしまうので注意。
- axes
- グラフの各軸(yaxis, xaxis, y2axis, x2axis)を個別設定する。
- 内部のキーは単数形(axis)。
- y2, x2は2軸表示の時の副軸。表示のためには別途系列ごとでの設定が必要。
- seriesDefaults
- 表示するすべての系のデフォルト値を設定する。
- series向けのrenderingプラグインの設定などをまとめてしまうと良い
- グラフの種類のプラグインなど。
- series
- 表示する各系を個別設定する。
- 系の順番はデータでセットした順番が維持される。
- グラフの種類を混ぜて表示したい場合は、ここでrendererの設定を行うことで変更する。
- 2軸評価の時の軸の混在設定('xaxis' or 'x2axis', 'yaxis' or 'y2axis')もここで行う。
- legend
- 凡例の表示設定
- デフォルト非表示なので、設定の際には、show: trueが必須となる。
- 表示位置は、デフォルトでグラフ内部になるので、円グラフで無い限りは、placement: 'outsideGrid' を設定すると良い。
- rendererを使用しない場合、表示は縦型になる。
- grid
- グリッド(グラフ表示の枠線と内部のグリッド線)
- 特に弄る必要はなし。
- 円グラフの場合、枠線が表示されてしまうため、 drawBorder: false, shadow: false を設定すると良い
- title: グラフのタイトル(外部に表示される)
プラグイン
- よく使いそうなプラグインは以下のとおり
jqplot.barRenderer.min.js
jqplot.pieRenderer.min.js
jqplot.enhancedLegendRenderer.min.js
jqplot.categoryAxisRenderer.min.js
jqplot.dateAxisRenderer.min.js
jqplot.canvasAxisLabelRenderer.min.js
jqplot.pointLabels.min.js
jqplot.highlighter.min.js
- 利用時には、個別に読み込む必要がある。
棒グラフ
- ファイル名: jqplot.barRenderer.min.js
- renderer: $.jqplot.BarRenderer
- document: http://www.jqplot.com/docs/files/plugins/jqplot-barRenderer-js.html
- 例
<div id='target_for_jqplot' style='width:400px; height:300px;'></div> <script type='text/javascript'> $.jqplot( 'target_for_jqplot', [ [[1, 10], [2, 20], [3, 30], [4, 40], [5, 50], [6, 60]], [[1, 2], [2, 4], [3, 8], [4, 16], [5, 32], [6, 64]] ], { title: '棒グラフ', seriesDefaults: { renderer: $.jqplot.BarRenderer, rendererOptions: { barWidth: 10 } }, axes: { xaxis: {renderer: $.jqplot.CategoryAxisRenderer} } } ) </script>
- barWidthは好みにも依るが設定しておくのがベター
- 与えられた値がpixelとして解釈される
- 合わせて、categoryAxisRendererを利用すると、より棒グラフ的に表示できる。
円グラフ
- ファイル名: jqplot.pieRenderer.min.js
- renderer: $.jqplot.PieRenderer.min.js
- document: http://www.jqplot.com/docs/files/plugins/jqplot-pieRenderer-js.html
- 例
<div id='target_for_jqplot' style='width:400px; height:300px;'></div> <script type='text/javascript'> $.jqplot( 'target_for_jqplot', [ [[1, 10], [2, 20], [3, 30], [4, 40], [5, 50], [6, 60]] ], { title: '円グラフ', seriesDefaults: { renderer: $.jqplot.PieRenderer, rendererOptions: {showDataLabels: true} }, grid: { drawBorder: false, shadow: false }, legend: {show: true, location: 'e', renderer: $.jqplot.PieLegendRenderer, rendererOptions: {numberColumns: 5}}, } ) </script>
- データの設定は、他のグラフと同じで一つの系を配列として、それをさらに配列にする。
- 枠線が表示されてしまうため、gridの設定を合わせてしておくとベター。
- 円グラフ用の凡例は、専用で拡張用rendererを持っているので、凡例の拡張にはこちらを使用する。
凡例の拡張
- ファイル名: jqplot.enhancedLegendRenderer.min.js
- renderer: $.jqplot.
- document: http://www.jqplot.com/docs/files/plugins/jqplot-enhancedLegendRenderer-js.html
- 例
<div id='target_for_jqplot' style='width:400px; height:300px;'></div> <script type='text/javascript'> $.jqplot( 'target_for_jqplot', [ [[1, 10], [2, 20], [3, 30], [4, 40], [5, 50], [6, 60]], [[1, 2], [2, 4], [3, 8], [4, 16], [5, 32], [6, 64]] ], { title: '凡例の拡張', series: [ {label: 'hoge'}, {label: 'fuga'} ], legend: { show: true, location: 'n', placement: 'outsideGrid', renderer: $.jqplot.EnhancedLegendRenderer, rendererOptions: { numberColumns: 5 } } } ) </script>
- デフォルトで表示なしのため、設定する際には、show: true 必須
- placement: 'outsideGrid' に設定しておくと、グラフGridの外部に表示可能
- rendererOptionsで、行/列に表示する最大数を指定できるが、どちらかだけでいいと思う。
軸関連の表示の拡張
- jqplot.categoryAxisRenderer.min.js
- 軸の表示を座標ではなくカテゴライズされた表示に変更する。
- (おそらく)カテゴライズの基準は、最初の系。
- http://www.jqplot.com/docs/files/plugins/jqplot-categoryAxisRenderer-js.html
- jqplot.dateAxisRenderer.min.js
- 与えられた日付を利用して連続した日付の座標をもった軸の表示に変更する。
- document: http://www.jqplot.com/docs/files/plugins/jqplot-dateAxisRenderer-js.html
- jqplot.canvasAxisLabelRenderer.min.js
- Y軸のラベルの表示を傾けて表示、というときに利用。2軸評価のグラフに特に有効。
- document: http://www.jqplot.com/docs/files/plugins/jqplot-canvasAxisLabelRenderer-js.html
- 他にもあるので、プラグインのドキュメントから確認。
グラフエリア内の表示の拡張
- jqplot.pointLabels.min.js
- seriesDefaults: {pointlabels {show: true, location: 'n'} } のようにして設定する
- 各プロットの値を常時表示する。
- document: http://www.jqplot.com/docs/files/plugins/jqplot-pointLabels-js.html
- jqplot.highlighter.min.js
- highlighter: {show: true} のようにして設定する
- 各プロットの値をマウスオーバーしたときに表示するなど。
- document: http://www.jqplot.com/docs/files/plugins/jqplot-enhancedLegendRenderer-js.html
ということで
とりあえず、必要なグラフは大体表示できるようになりましたと。
あとは、documentを見ながら、カスタマイズかな。