jQueryグラフの上にあるデータ/軸のラベル

Question

x軸とy軸の数値ラベルをjQuery Flotグラフにオーバーレイする方法はありますか？だから、ラベルはグラフの外側ではなく、グラフ自体の上に置いておきたい。 FLOT内から軸のテキストと書式設定をつかんで外に、このようなオーバーレイを作成する簡単な方法はあり http://people.iola.dk/olau/flot/examples/annotating.html

：

次の例では、注釈のグラフの上にオーバーレイdiv要素を作成しますそれ？または、グラフの上に軸ラベルを重ねる別の方法がありますか？

Answer 1

x軸とy軸の目盛りラベルを同時に表示すると、特にクリーンではなく、特にうまく動作しない方法の1つは、gridのlabelMarginオプションを負に設定することです値。

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

---

二アイデアは、グラフが塗装された後class="tickLabel"を持つすべてのdiv年代をつかむためにある可能性があります。そして、「手動で」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を使用することであろう。これは2番目のアイデアに似ていますが、2番目のアイデアの機能で発生する可能性がある再配置時におそらく目立つ「ラベルの点滅」なしに、それらを配置したい場所に直接配置します。

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

このtickFormatter機能は最高jQuery Flot sourcecodeを見ることで得られるようになりますどのように特に機能measureLabels（これはあなたFLOT自体は目盛りラベルを配置する方法のアイデアを取得）し、

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

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