グラフの上のjQuery FLOTデータ/軸ラベル

Question

のjQuery FLOTグラフ上にx軸とy軸の数値ラベルをオーバーレイする方法があります。だから、私はしかし、グラフ自体の上に、グラフの横、ラベルは外ではないにしたい。

次の例では、注釈のグラフの上にオーバーレイDIVを作成します。 http://people.iola.dk/olau/flot/examples/annotating。 HTML の

FLOT内から軸のテキストと書式をつかみ、それから、このようなオーバーレイを作成する簡単な方法はありますか？または、多分、グラフの上に軸ラベルを重ねるの別のより良い方法があるのですか？

Answer 1

特に特にきれいではないです。

一つの方法は、あなたが同時にx軸とy軸の目盛りラベルを表示することを計画している場合、負の値にlabelMargin上gridオプションを設定することでうまく動作しません。ます。

var plot = $.plot(placeholder, data, {
    ...
    grid: { ..., labelMargin: -20, ... }
    ...
});

<時間>

二アイデアは、グラフが塗装された後divているすべてのclass="tickLabel"さんをつかむためにある可能性があります。そして、「手動」彼らのCSSの位置を変更します。

$("div.tickLabel").each(function(i,ele) {
    ele = $(ele);
    if (ele.css("text-align") == "center") { //x-axis
        ele.css("top", ele.position().top - 20); //move them up over graph
    } else {  //y-axis
        ele.css("left", ele.position().left + 20); //move them right over graph
    }
});

x軸とy軸上の最小目盛りラベル値が互いに重複するようにもちろん、これはまだいくつかの問題を有しており、x軸とy軸上の最低/最高ティック・ラベル値がエッジ上に配置されますグラフの。しかし、いくつかの微調整でこれは実行可能な解決策になるかもしれません。

<時間>

第三のアイデアは、直接X軸およびY軸の目盛ラベルのtickFormatterを使用することであろう。これは、第二の考え方に似ていますが、あなたは彼らが第二の考えでは関数で発生する再配置に多分目立つ「ラベルちらつき」なしになりたい場所を直接それらを配置します。

var plot = $.plot(placeholder, data, {
    ...
    xaxis: {
        ...,
        tickFormatter: function formatter(val, axis) {
           //return appropriately absolute positioned element
        }
    },
    ...
});

このtickFormatter機能は最高のjQuery FLOT rel="noreferrer">ので特に関数measureLabels（これはあなたFLOT自体は目盛りラベルを配置する方法のアイデアを取得します）と

のように見えるデフォルトティックフォーマッタ

function (v, axis) {
    return v.toFixed(axis.tickDecimals);
};