グラフの上のjQuery FLOTデータ/軸ラベル
質問
のjQuery FLOTグラフ上にx軸とy軸の数値ラベルをオーバーレイする方法があります。だから、私はしかし、グラフ自体の上に、グラフの横、ラベルは外ではないにしたい。
次の例では、注釈のグラフの上にオーバーレイDIVを作成します。 http://people.iola.dk/olau/flot/examples/annotating。 HTML の
FLOT内から軸のテキストと書式をつかみ、それから、このようなオーバーレイを作成する簡単な方法はありますか?または、多分、グラフの上に軸ラベルを重ねるの別のより良い方法があるのですか?
解決
一つの方法は、あなたが同時に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);
};