jqplotで、いい感じのグラフを描画する

イシュー

• グラフ描画ツールのjqplotでいい感じのグラフを描画したい

参考

• jqPlot Charts and Graphs for jQuery

• cleonello / jqplot / source / — Bitbucket

• jQuery の jqPlot で作る折れ線グラフのY軸上の目盛りをカスタマイズ

  • ticksを指定しない場合は、自動的に計算する。
• jQueryでグラフ作成 ( しゃいん☆のブログ| 名古屋市 Webシステム開発 サーバ構築 ネットワーク構築 株式会社コネクティボ )
• 見栄えのいいチャートグラフがかけるjqPlotを使ってみよう(1) | キャスレーコンサルティング 技術ブログ
• jQueryグラフ描画ライブラリjqplotで棒グラフを描く - 大人になったら肺呼吸
• [jquery] jqplotを使い始めて、最初に知っておくと良い感じのこと - sugilogのブログ
• jQuery UI グラフプラグイン jqPlot を使用する ～その１ 導入～ | 打ち聞かせ
• PHPとjQueryライブラリ「jqPlot」で綺麗なグラフを描画する【2/10】
• jQuery | 「jqPlot」を使って棒グラフを作成
• グラフを描画するjqPlotがやたら高性能すぎてけしからん件 | Knowledge base func
• Jqplot - wiki - PCスキルの小技・忘却防止メモ

デフォルトのTickの設定

• jqplot.linearTickGenerator.js
• LinearTickGenerator に以下の値を設定
  • bestLinearInterval
    • (range, scalefact) -> (interval)
  • bestInterval
    • (range, numberTicks) -> (interval)
  • bestLinearComponents
    • (range, scalefact) -> (interval, fact, magnitude)
  • bestConstrainedInterval
    • (min, max, nttarget) -> (min, max, number ticks, format string, tick interval)

LinearAxisRenderer.js コードリード

prop: breakPoints EXPERIMENTAL!! Use at your own risk! Works only with linear axes and the default tick renderer. Array of [start, stop] points to create a broken axis. Broken axes have a "jump" in them, which is an immediate transition from a smaller value to a larger value. Currently, axis ticks MUST be manually assigned if using breakPoints by using the axis ticks array option.

小道具：breakPoints  実験中です！ご自身の責任で使用してください！  単一の直線軸とデフォルトのTickレンダラーで動作します。  [start, stop]の配列は、壊れた軸（broken axis）を作成するためにポイントします。  壊れた軸（broken axis）はその中に「ジャンプ」があり、それは即時に小さい値から大きな値に遷移する場合です。 現時点では、breakPoints を使用する場合は、軸目盛の配列オプションを使って、軸目盛を手動で割り当てなければなりません。

• ≈ ブレークポイント（ジャンプ）の話

jqplot.linearAxisRenderer.js line 390

var ret = $.jqplot.LinearTickGenerator(min, max, this.scalefact, numberTicks, keepMin, keepMax);

jqplot.LinearTickGenerator の返り値

• qplot.linearTickGenerator.js line 317

 tempr[0] = Math.floor(axis_min / ss) * ss;  // min
 tempr[1] = Math.ceil(axis_max / ss) * ss;   // max
 tempr[2] = Math.round((tempr[1]-tempr[0])/ss+1.0);    // number of ticks
 tempr[3] = bestFormatString(ss);            // format string
 tempr[4] = ss;                              // tick Interval

jqplot.linearAxisRenderer.js line 387 - 405

  // var threshold = 30;
  // var tdim = Math.max(dim, threshold+1);
  // this._scalefact =  (tdim-threshold)/300.0;
  var ret = $.jqplot.LinearTickGenerator(min, max, this._scalefact, _numberTicks, keepMin, keepMax); 
  // calculate a padded max and min, points should be less than these
  // so that they aren't too close to the edges of the plot.
  // User can adjust how much padding is allowed with pad, padMin and PadMax options. 
  // If min or max is set, don't pad that end of axis.
  var tumin = (this.min != null) ? min : min + range*(this.padMin - 1);
  var tumax = (this.max != null) ? max : max - range*(this.padMax - 1);

  // if they're equal, we shouldn't have to do anything, right?
  // if (min <=tumin || max >= tumax) {
  if (min <tumin || max > tumax) {
    tumin = (this.min != null) ? min : min - range*(this.padMin - 1);
    tumax = (this.max != null) ? max : max + range*(this.padMax - 1);
    ret = $.jqplot.LinearTickGenerator(tumin, tumax, this._scalefact, _numberTicks, keepMin, keepMax);
  }