फ़्लोट डेटा लेबल

Question

मैं फ़्लोट का उपयोग करके एक लाइन चार्ट तैयार करने की कोशिश कर रहा हूं, लेकिन मैं डेटा लेबल को चार्ट पर दिखाना चाहता हूं - यानी, मैं चाहता हूं कि प्रत्येक बिंदु का मान उस बिंदु के बगल में दिखाई दे। मुझे लगता है कि यह एक विकल्प होना चाहिए, लेकिन इसे एपीआई में नहीं मिल रहा है। क्या मुझे बस कुछ याद आ रहा है, या क्या कोई कामकाज जानता है?

अग्रिम धन्यवाद।

Answer 1

यहाँ है कि कैसे मैं एक सुखद एनीमेशन प्रभाव सहित सुविधा, कहा:

var p = $.plot(...); 

$.each(p.getData()[0].data, function(i, el){ 
    var o = p.pointOffset({x: el[0], y: el[1]}); 
    $('<div class="data-point-label">' + el[1] + '</div>').css({ 
    position: 'absolute', 
    left: o.left + 4, 
    top: o.top - 43, 
    display: 'none' 
    }).appendTo(p.getPlaceholder()).fadeIn('slow'); 
}); 

आप कर सकते हैं स्थिति को स्थानांतरित करें और एक स्टाइलशीट में सीएसएस प्रदर्शित करें।

Answer 2

फ़्लोट Google समूह में आप जिस सुविधा को चाहते हैं उसे here से अनुरोध किया गया है। ऐसा लगता है कि इसे कभी लागू नहीं किया गया था (एपीआई में चार्ट के अंदर किसी भी लेबल को रखने के बारे में कुछ भी नहीं है)। मुझे लगता है कि आपके प्रश्न का उत्तर यह है कि नहीं, इस समय ग्राफ के अंदर लाइनों पर कुछ बिंदुओं के बगल में मूल्य दिखाने के लिए यह संभव नहीं है।

फ्लोट पर हेड डेवलपर ओले लार्सन ने उल्लेख किया कि चार्ट के अंदर लेबल फ़्लोट पर किसी भी चीज़ से अलग है और उन्हें यह करने के लिए एपीआई/प्लॉट पैरामीटर को विस्तारित करने के तरीके के बारे में सोचना होगा।

यह कहा गया है कि, आप Flot forum पर एक प्रश्न पोस्ट करना चाहते हैं या नई सुविधा के लिए bug-tracker पर एक सुझाव देना चाहते हैं। ओले लार्सन वास्तव में सभी प्रश्नों, बग्स और सुझावों को वापस पाने में वास्तव में अच्छा है।

Answer 3

किसी और के लिए एक त्वरित समाधान की तलाश में है, तो इस प्लगइन देखें:

http://sites.google.com/site/petrsstuff/projects/flotvallab

Answer 4

ऐसा लगता है कि flot-valuelabels pluginprevious flot plugin का कांटा है - लेकिन कांटा कोड कैनवास पर लेबल प्रस्तुत करता है। प्लगइन के गीथब विकी पेज, here पर यह कैसा दिखता है (यह आंखों के लिए काफी प्रसन्न दिखता है) का एक डेमो देख सकता है।

Answer 5

function redrawplot() { 
    $('.tt1').remove(); 
    var points = plot.getData(); 
    var graphx = $('#placeholder').offset().left; 
    graphx = graphx + 30; // replace with offset of canvas on graph 
    var graphy = $('#placeholder').offset().top; 
    graphy = graphy + 10; // how low you want the label to hang underneath the point 
    for(var k = 0; k < points.length; k++){ 
      for(var m = 1; m < points[k].data.length-1; m++){ 
      if(points[k].data[m][0] != null && points[k].data[m][1] != null){ 
        if ((points[k].data[m-1][1] < points[k].data[m][1] && points[k].data[m][1] > points[k].data[m+1][1]) && (points[k].data[m-1][1] - points[k].data[m][1] < -50 || points[k].data[m][1] - points[k].data[m+1][1] > 50)) { 
           showTooltip1(graphx + points[k].xaxis.p2c(points[k].data[m][0]) - 15, graphy + points[k].yaxis.p2c(points[k].data[m][1]) - 35,points[k].data[m][1], points[k].color); 
       } 
           if ((points[k].data[m-1][1] > points[k].data[m][1] && points[k].data[m][1] < points[k].data[m+1][1]) && (points[k].data[m-1][1] - points[k].data[m][1] > 50 || points[k].data[m][1] - points[k].data[m+1][1] < -50)) { 
           showTooltip1(graphx + points[k].xaxis.p2c(points[k].data[m][0]) - 15, graphy + points[k].yaxis.p2c(points[k].data[m][1]) + 2,points[k].data[m][1], points[k].color); 
           } 
          } 
     } 
     } 

} 

function showTooltip1(x,y,contents, colour){ 
    $('<div class=tt1 id="value">' + contents + '</div>').css({ 
     position: 'absolute', 
     display: 'none', 
     top: y, 
     left: x, 
     'border-style': 'solid', 
     'border-width': '2px', 
     'border-color': colour, 
     'border-radius': '5px', 
     'background-color': '#ffffff', 
     color: '#262626', 
     padding: '0px', 
     opacity: '1' 
    }).appendTo("body").fadeIn(200); 
}