2009-12-03 31 views
12

पर शीर्ष पर jQuery फ़्लोट डेटा/धुरी लेबल एक jQuery फ़्लोट ग्राफ़ पर एक्स-अक्ष और वाई-अक्ष संख्यात्मक लेबल ओवरले करने का कोई तरीका है। इसलिए, मैं चाहता हूं कि लेबल ग्राफ के बगल में, लेकिन ग्राफ के शीर्ष पर न हों।ग्राफ

निम्न उदाहरण एनोटेशन के लिए ग्राफ के शीर्ष पर किसी ओवरले div बनाता है: http://people.iola.dk/olau/flot/examples/annotating.html

वहाँ flot से ही पाठ और एक धुरी के स्वरूपण को पकड़कर से बाहर इस तरह के एक उपरिशायी बनाने का एक सरल तरीका है यह? या, ग्राफ के शीर्ष पर अक्ष लेबल को ओवरले करने का शायद एक और बेहतर तरीका है?

+0

क्या मेरा उत्तर संतोषजनक/काम नहीं कर रहा है? कृपया प्रतिक्रिया दें – jitter

उत्तर

20

एक तरीका, जो विशेष रूप से साफ नहीं है और विशेष रूप से अच्छी तरह से काम नहीं करेगा यदि आप एक ही समय में x- और y-axis टिक लेबल दिखाने की योजना बना रहे हैं, तो पर नकारात्मक पर labelMargin विकल्प सेट करना है मूल्य।

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

एक दूसरा विचार सभी div की जो class="tickLabel" है के बाद ग्राफ चित्रित किया गया है हड़पने के लिए हो सकता है। और फिर "मैन्युअल" उनके सीएसएस पोजीशनिंग को बदल दें।

$("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 sourcecode को देखकर ली गई है दिखाई दे सकता है कैसे विशेष रूप से समारोह measureLabels (यह आप इसका अंदाज़ा लगा Flot ही टिक लेबल की स्थिति हो जाता है) और डिफ़ॉल्ट टिक फ़ॉर्मेटर जो

तरह लग रहा है
function (v, axis) { 
    return v.toFixed(axis.tickDecimals); 
};