FLOT グラフを描画するPlugin その２

実験 jQuery

データ抜けを自動で補完する機能を抑制する方法

結論から言うと一つのデータ群としては出来ず、データ別けるしか無いようです。

var d1 = [
            [1, 96],
            [2, 89],
            [3, 85],
            [4, 90],
            [5, 87],
            [6, 86],
            [8, 83],
            [9, 86],
         ];
var d2 = [
            [1, 137],
            [2, 135],
            [3, 130],
            [4, 129],
            [5, 120],
            [6, 124],
            [8, 125],
            [9, 126],
         ];
$.plot($("#placeholder"),
    [
        {
            label: "Low ",
            data: d1
        },
        {
            label: "High",
            data: d2
        },
    ],
 );
    • これだと7日のデータが補完される
var l1 = [
            [1, 96],
            [2, 89],
            [3, 85],
            [4, 90],
            [5, 87],
            [6, 86],
         ];
var l2 = [
            [8, 83],
            [9, 86],
         ];
var h1 = [
            [1, 137],
            [2, 135],
            [3, 130],
            [4, 129],
            [5, 120],
            [6, 124],
         ];
var h2 = [
            [8, 125],
            [9, 126],
         ];
$.plot($("#placeholder"),
    [
        {
            label: "Low ",
            color: 1,
            data: l1
        },
        {
            color: 1,
            data: l2
        },
        {
            label: "High",
            color: 2,
            data: h1
        },
        {
            color: 2,
            data: h2
        },
    ],
 );
    • これで7日のデータが空白のグラフが描画される。
      ただし、明示的に色の指定をしないと同じデータ軸なのに異なる色で描画されてしまう

凡例を描画領域の外に表示する方法

  • 凡例に関するオプションの一覧
legend: {
  show: boolean,
  labelFormatter: null or (fn: string -> string),
  labelBoxBorderColor: color,
  noColumns: number,
  position: "ne" or "nw" or "se" or "sw",
  margin: number of pixels,
  backgroundColor: null or color,
  backgroundOpacity: number in 0.0 - 1.0,
  container: null or jQuery object
}

凡例を領域内で任意の位置に表示するにはpositionを指定する
neが右上、nwが左上、seが右下、swが左下に表示
例）ne,nw,se,swの順に指定してみた

margin指定で凡例をグラフの中心に向かって移動できる
例）上記グラフでmargin:10を指定してみた

凡例を描画領域の外の任意の場所に表示するには、containerでjQuery objectを指定（例えばidとか）
<div id="placeholder" style="width:600px;height:300px;"></div>
<div id="container"></div>
$.plot($("#placeholder"),
    [
    - 略 -
    ],
    {
        legend: {
            show: true,
            container: $("#container")
        },
    }
);


こんな感じで表示されるが、何となくたてに並ぶと違和感が
noColumnsで横に並べたい凡例の個数を指定

    - 略 -
        legend: {
            show: true,
            noColumns: 2,
            container: $("#container")
        },
    }
);


横並びになった

正常値の範囲だけバックグラウンドに色を付ける

setSelection(area)で範囲指定出来るが

<div id="placeholder" style="width:600px;height:300px;"></div>
<div id="container"></div>
$.plot($("#placeholder"),
    - 略 -
).setSelection({ x1: 0, x2: 32, y1: 90, y2: 130});


範囲は一カ所しか指定出来ない
一瞬バーグラフでなんとかなるかな？と思ったけどバーグラフは原点からの高さ(低さ)しか表現出来ない

よくよく考えたら上(伸縮期)と下(拡張期)で正常値の範囲が違うのだから範囲を塗りつぶす事自体あまり意味がなく、それぞれの正常値と異常値の境界に線を引くだけで良かった

＃ちなみに後から指定したデータの方がレイヤー的には上になるので境界域に線を引いたり、週末をバーグラフで色分けしたりする場合には先に指定する