jQuery

2010年3月12日 (金)

flotのx2axisを使って

コミット数積算グラフプラグイン(その2)では
flot0.6を使って、milestoneを地味に表示させてみました。
この、上部にx2axisを使って文字列表示する
やり方を忘れないうちに書いておきます。

例えばflot0.6に入ってるbasic.htmlの

    $.plot($("#placeholder"), [ d1, d2, d3 ]);

    var tickdata = [[10, "AAA"], [20, "BBB"],[60, "CCC"],[90, "DDD"]];

    $.plot($("#placeholder"),
    [{ label: "d1", data: d1 },
     { label: "d2", data: d2 },
     { label: "d3", data: d3 },
     { label: "", data: [null] , xaxis: 2}],
    {x2axis: { min: 0 , max: 100 , ticks: tickdata }});

と書き換えます。

これをブラウザに表示すると、下のようになります。

Basic2

つまり、ラベルを追加して、グラフ上端の指定位置に
文字列をおくことができます。

こうするために、labelが""(これによりラベルが凡例に表示されない)、
dataをnull(これによりdataを非表示にする)にし、x2axisを使ってます。

tickdataには数字とそれを置き換えたい文字列を入れてます。

ここまでやってなんですけど、この文字列が長かったり、
文字列の間隔が狭いと重なってしまうのが…。

| | コメント (0) | トラックバック (0)