12

x軸とy軸の数値ラベルをjQueryFlotグラフにオーバーレイする方法はありますか？したがって、ラベルをグラフの横ではなく、グラフ自体の上に配置する必要があります。

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

フロット内からテキストと軸のフォーマットを取得し、そこからそのようなオーバーレイを作成する簡単な方法はありますか？または、グラフの上に軸ラベルをオーバーレイする別のより良い方法はありますか？

4

1 に答える 1

20

x 軸と y 軸の目盛りラベルを同時に表示する予定がある場合、特にきれいではなく、特にうまく機能しない 1 つの方法は、 のlabelMarginオプションをgrid負の値に設定することです。

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

2 番目のアイデアは、グラフが描画された後にすべて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 軸の最小/最大の目盛りラベル値がグラフの端に配置されるためです。 . しかし、微調整を行うことで、これは実行可能な解決策になる可能性があります。

tickFormatter3 番目のアイデアは、x 軸と y 軸の目盛りラベルにa を直接使用することです。これは 2 番目のアイデアと同様に機能しますが、2 番目のアイデアの関数で発生する可能性のある再配置時に「ラベルのちらつき」が目立つことなく、配置したい場所に直接配置します。

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

このtickFormatter関数がどのように見えるかは、jQuery Flot ソースコード、特に関数measureLabels(これにより、Flot 自体が目盛りラベルをどのように配置するかがわかります) と、

function (v, axis) {
    return v.toFixed(axis.tickDecimals);
};
于 2009-12-06T14:55:42.720 に答える