jQuery Grafiğin üstündeki veri/eksen etiketleri grafiği

Question

X ekseni ve y ekseni sayısal etiketlerinin bir jQuery Flot grafiği üzerine yerleştirilmesi için bir yol var mı? Bu yüzden, etiketlerin grafiğin yanında değil, grafiğin kendisinin dışında olmasını istiyorum. flot içinde bir eksen metin ve biçimlendirme kapma ve üzerinden böyle bir bindirme oluşturma basit bir yolu var http://people.iola.dk/olau/flot/examples/annotating.html

:

Aşağıdaki örnek, ek açıklamalar için grafiğin üstünde bir bindirme div oluşturur o? Ya da, grafiğin üstündeki eksen etiketlerini başka bir daha iyi bir şekilde yerleştirmenin bir yolu var mı?

Answer 1

Özellikle temiz olmayan ve özellikle x ve y ekseni işaretlerini aynı anda göstermeyi planladığınızda hoş olmayan bir yöntem, seçeneğini grid üzerinde bir negatif olarak ayarlamaktır değer.

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

---

ikinci bir fikir grafik boyanmış sonra class="tickLabel" olan tüm div 's kapmak olabilir. Ve sonra "manuel" CSS konumlarını değiştirir. Tabii

$("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 
    } 
}); 

bu hala birbirlerine ve x ve y ekseni üzerinde en düşük/en yüksek kene etiket değerleri olacaktır çakışacak x ve y ekseni üzerinde en düşük kene etiket değerleri olarak bazı sorunlar vardır grafiğin kenarlarına yerleştirilmiş. Ama bazı ince ayarlarla bu uygulanabilir bir çözüm olabilir.

---

Üçüncü bir fikir ile doğrudan x- ve y-ekseni kene etiketler için bir tickFormatter kullanmak olacaktır. Bu, ikinci düşünceye benzer çalışır, ancak onları, ikinci fikirdeki işlevde oluşabilecek yeniden konumlandırmada dikkat çeken "etiket titremesi" olmadan olmasını istediğiniz yere yerleştirir.

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

bu tickFormatter fonksiyon iyi jQuery Flot sourcecode bakarak türetilmiştir gibi görünebilir Nasıl Özellikle fonksiyon measureLabels (bu size Flot kendisi kene etiketleri konumlandırır nasıl bir fikir alır) ve

benziyor varsayılan kene biçimlendirici

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