[jquery] jqplotを使い始めて、最初に知っておくと良い感じのこと

ベーシック

最小限の読みこみ設定
  • html5として表示
  • IE（9より下位バージョン）向けに、excanvas.jsをconditional commentsとして設定
  • jqueryと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>

f:id:sugilog:20111109153558p:image

  • 凡例はデフォルトoff
  • グラフのタイトルもデフォルトoff
オプションの設定
  • $.jqplotの第3引数にオプションを設定するための連想配列を設定する。
  $.jqplot(selector, data, options)
  options: 連想配列を設定する。
  • 例
  <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>

f:id:sugilog:20111109153559p:image

ベーシックオプション
  • 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

  • 利用時には、個別に読み込む必要がある。
棒グラフ
  • 例
  <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>

f:id:sugilog:20111109153600p:image

  • barWidthは好みにも依るが設定しておくのがベター
    • 与えられた値がpixelとして解釈される
  • 合わせて、categoryAxisRendererを利用すると、より棒グラフ的に表示できる。
円グラフ
  • 例
  <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>

f:id:sugilog:20111109153601p:image

  • データの設定は、他のグラフと同じで一つの系を配列として、それをさらに配列にする。
  • 枠線が表示されてしまうため、gridの設定を合わせてしておくとベター。
  • 円グラフ用の凡例は、専用で拡張用rendererを持っているので、凡例の拡張にはこちらを使用する。
凡例の拡張
  • 例
  <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>

f:id:sugilog:20111109153602p:image

  • デフォルトで表示なしのため、設定する際には、show: true 必須
  • placement: 'outsideGrid' に設定しておくと、グラフGridの外部に表示可能
  • rendererOptionsで、行／列に表示する最大数を指定できるが、どちらかだけでいいと思う。
軸関連の表示の拡張
  • 他にもあるので、プラグインのドキュメントから確認。
グラフエリア内の表示の拡張

ということで

とりあえず、必要なグラフは大体表示できるようになりましたと。

あとは、documentを見ながら、カスタマイズかな。