jQuery/फ़्लोट: आप डेटापॉइंट के निर्देशांक कैसे प्राप्त करते हैं?

Question

मैं वर्तमान में http://people.iola.dk/olau/flot/examples/interacting.html पर उदाहरण देख रहा हूं लेकिन मुझे पता नहीं चल सकता है कि डेटापॉइंट के निर्देशांक कैसे प्राप्त करें। मैं प्लॉट पर क्लिक नहीं करूँगा इसलिए मैं ईवेंट प्लॉटक्लिक का उपयोग नहीं कर सकता। अब मेरा प्रश्न: क्या क्लिक किए बिना डेटापॉइंट के एक्स और वाई निर्देशांक प्राप्त करने का कोई और तरीका है? मैं ग्राफ पर विभिन्न बिंदुओं को हाइलाइट करने के लिए jQuery स्लाइडर का उपयोग करूँगा और डेटापॉइंट्स के बगल में टूलटिप रखना चाहता हूं।

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

Answer 1

सैद्धांतिक रूप से हो रही है एक्स, वाई निर्देशांक है अंदर एक कंटेनर इस प्रकार है:

$(function() { 
     $('#container').mousemove(function (e) { 
      $('.xPos').text(e.clientX - $('#container').offset().left); 
      $('.yPos').text(e.clientY - $('#container').offset().top); 
     }); 
    }); 

Answer 2

flot API से:

विभिन्न बातें एक अंदर भरवां कर रहे हैं धुरी वस्तु, उदाहरण के लिए आप getAxes()। xaxis.ticks का उपयोग कर सकते हैं यह जानने के लिए कि टिक xxis के लिए हैं। दो अन्य उपयोगी विशेषताएं पी 2 सी और सी 2 पी, डेटा बिंदु स्थान से कैनवास प्लॉट स्पेस और पीछे स्थानांतरित करने के लिए फ़ंक्शन स्थानांतरित करने के लिए फ़ंक्शंस हैं। दोनों प्लॉट ऑफसेट के साथ ऑफ़सेट मान मानते हैं।

plot.offset() के साथ संयुक्त (दस्तावेज़ में ग्रिड क्षेत्र रिश्तेदार की ऑफसेट), आप सभी उपकरण आप बाकी यह पता लगाने की जरूरत है होना चाहिए। plot.pointOffset() भी उपयोगी है। यह युक्त div के सापेक्ष एक बिंदु की स्थिति देता है।

Answer 3

इस पर देर से बिट करें लेकिन मैंने ग्राफ़ को प्लॉट ग्राफ़ में मेरे प्लॉट किए गए डेटा पॉइंट्स के नीचे लेबल डालने के तरीके के रूप में ग्राफ़ प्लॉट करने के बाद इस फ़ंक्शन को चलाया।

$(document).ready(function(){ 
$(function(){ 
     var data = [ 
      {data: [[1, 5], [2, 10], [3, 15], [4, 15], [5, 10], [6, 5]], color: '#3a8df6'}, 
      {data: [[1, 52], [2, 42], [3, 32], [4, 32], [5, 42], [6, 52]], color: '#ff0000'} 
      ]; 
     var options = { 
       lines: {show: true}, 
       yaxis: {tickDecimals: 0, min: 0, max: 100, autoscaleMargin: null} 
      }; 
    var graph = $.plot($('#graph'), data, options); 
    var points = graph.getData(); 
    var graphx = $('#graph').offset().left; 
    graphx = graphx + 30; // replace with offset of canvas on graph 
    var graphy = $('#graph').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 = 0; m < points[k].data.length; m++){ 
      showTooltip(graphx + points[k].xaxis.p2c(points[k].data[m][0]), graphy + points[k].yaxis.p2c(points[k].data[m][1]),points[k].data[m][1]) 
      } 
     } 
}); 
}); 
function showTooltip(x,y,contents){ 
     $('<div id="tooltip">' + contents + '</div>').css({ 
      position: 'absolute', 
      display: 'none', 
      top: y, 
      left: x 
     }).appendTo("body").fadeIn(200); 
} 

यह मेरे सिर के ऊपर से है लेकिन मूल रूप से, इस समारोह सभी datapoints के माध्यम से चला जाता है और कुल्हाड़ियों में P2C कार्यों का उपयोग करता है, तो यह इस (कुछ गद्दी के साथ) ग्राफ में ही की भरपाई करने के लिए कहते हैं। फिर यह सामान्य टूलटिप ओवरले का उपयोग करता है।

यदि बार बार चार्ट पर इसका उपयोग करना है तो आप टूलटिप की चौड़ाई निर्धारित कर सकते हैं, इसे केंद्र का टेक्स्ट संरेखण दें और फिर यदि आप सभी लेबल लाइन में होना चाहते हैं तो बस यक्सिस में एक ही संख्या डालें पी 2 सी समारोह। फिर ग्राफ़ी पैडिंग का उपयोग उस स्थिति में करने के लिए करें जहां आप चाहते हैं।

उम्मीद है कि यह भविष्य में किसी की मदद करेगा :)