Hatena::ブログ(Diary)

natu_nの日記 このページをアンテナに追加 RSSフィード

2008-03-07

[][]FLOT グラフを描画するPlugin その2

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

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

f:id:natu_n:20080307153120p:image

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の順に指定してみた

f:id:natu_n:20080307153606p:image

margin指定で凡例をグラフの中心に向かって移動できる

例)上記グラフでmargin:10を指定してみた

f:id:natu_n:20080307153605p:image

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

f:id:natu_n:20080307153754p:image

こんな感じで表示されるが、何となくたてに並ぶと違和感が

noColumnsで横に並べたい凡例の個数を指定

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

f:id:natu_n:20080307153753p:image

横並びになった

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

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});

f:id:natu_n:20080307152959p:image

範囲は一カ所しか指定出来ない

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

f:id:natu_n:20080307152958p:image

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

f:id:natu_n:20080307152957p:image

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

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証