फ्लोट चार्ट

Question

में लाइन हाइलाइट करें क्या फ़्लोट वाले लाइन चार्ट को हाइलाइट करना संभव है? मैं केवल डेटापॉइंट्स को हाइलाइट करना देखता हूं लेकिन अंक के बीच की रेखा नहीं।

मैं निम्नलिखित example से कोड का उपयोग करता हूं।

$("#placeholder").bind("plothover", function (event, pos, item) { 
    $("#x").text(pos.x.toFixed(2)); 
    $("#y").text(pos.y.toFixed(2)); 

    if ($("#enableTooltip:checked").length > 0) { 
     if (item) { 
      if (previousPoint != item.dataIndex) { 
       previousPoint = item.dataIndex; 

       $("#tooltip").remove(); 
       var x = item.datapoint[0].toFixed(2), 
        y = item.datapoint[1].toFixed(2); 

       showTooltip(item.pageX, item.pageY, 
          item.series.label + " of " + x + " = " + y); 
      } 
     } 
     else { 
      $("#tooltip").remove(); 
      previousPoint = null;    
     } 
    } 
}); 

Answer 1

फ़्लोट 0.7 के स्रोत को देखते हुए, लाइनों को हाइलाइट करने के लिए कार्यक्षमता शामिल नहीं है।

हालांकि, अगर आप flot विस्तार करने के लिए आप क्या चाहते करने के लिए ...

Flot एक "उपरिशायी" कैनवास जो इसे हाइलाइट करने जैसे प्रभाव ऐसा करने के लिए उपयोग करता है चाहता था अगर। इस स्रोत में संबंधित संदर्भ octx है। यदि आप drawPointHighlight(series, point) विधि देखते हैं तो आप देख सकते हैं कि डेटापॉइंट्स के लिए हाइलाइटिंग कैसे की जाती है। आप लाइनों के लिए एक समान विधि लिख सकते हैं।

drawOverlay() फ़ंक्शन हाइलाइट करने योग्य ऑब्जेक्ट्स की एक सरणी पर पुनरावृत्त होता है - आप इसे "लाइन" ऑब्जेक्ट्स को संभालने के लिए भी विस्तारित करना चाहते हैं।

अंत में आप highlightable वस्तुओं, मौजूदा highlight() और unhighlight() तरीकों के अनुरूप की सरणी से जोड़ने के लिए/लाइनों को हटाने के लिए एक विधि लिखने के लिए की आवश्यकता होगी। सूचना इन तरीकों लाइनों का उपयोग कर सार्वजनिक बना रहे हैं:

plot.highlight = highlight; 
plot.unhighlight = unhighlight; 

Answer 2

बजाय (एक श्रृंखला के भीतर या डेटा बिंदुओं का समूह) एक विशेष लाइन खंड को उजागर करने की कोशिश कर रहा है, तो आप एक उचित रंग के साथ दो अलग श्रृंखला (प्रत्येक इस्तेमाल कर सकते हैं) जो आप चाहते हैं वह करने के लिए?

मैं चार्ट चार्ट के साथ एक अतिरिक्त आयाम दिखाने में सक्षम होने के लिए बार चार्ट के साथ ऐसा करता हूं और यह उचित रूप से अच्छी तरह से काम करता है।

नोट: मैं ज्यादातर बार चार्ट के लिए flot का उपयोग कर रहे हैं, ताकि आप अगर अपनी श्रृंखला लाइन एक शून्य मान के लिए क्षैतिज अक्ष के लिए नीचे चला जाता है, तो आपको एक अलग श्रृंखला हर बार जब आप चाहते हैं रंग का उपयोग करने को बदलने के लिए हो सकता है (या वापस बदलें)।

Answer 3

सबसे आसान काम करने के लिए सिर्फ 'plothover' घटना का उपयोग करने के चार्ट को फिर से प्रस्तुत करना है। फ्लोट बहुत तेजी से प्रस्तुत करता है, इसलिए कोई झिलमिलाहट नहीं होनी चाहिए। मैं वर्तमान में एक परियोजना में ऐसा कर रहा हूं, और यह बहुत अच्छा काम करता है।

आप plothover 'और' plotclick 'यहाँ की घटनाओं पर प्रलेखन पा सकते हैं: https://github.com/flot/flot/blob/master/API.md#customizing-the-grid

flot का एक गैर-दस्तावेजी सुविधा है जो आपको प्रत्येक श्रृंखला वस्तु के लिए मनमाने ढंग से कुंजी जोड़ सकते हैं, और उन कुंजियों में उपलब्ध हो जाएगा है 'प्लोथोवर' और 'प्लॉटक्लिक' इवेंट हैंडलर। मेरे उदाहरण में मैंने 'कुंजी' नामक एक मनमानी कुंजी बनाई है, यदि आप लेबल का उपयोग कर रहे हैं, तो आप 'लेबल' का उपयोग कर सकते हैं।

यहाँ एक उदाहरण है:

$(function() { 

    var d1 = []; 
    for (var i = 0; i < 14; i += 0.5) { 
    d1.push([i, Math.sin(i)]); 
    } 
    var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]]; 
    var d3 = [[0, 12], [7, 12], [7, 2.5], [12, 2.5]]; 

var data = [ 
    {key: 'd1', data: d1}, 
    {key: 'd2', data: d2}, 
    {key: 'd3', data: d3} 
    ]; 

    function plotChart(lineKey) { 
     $.each(data, function(index, line){ 
     line.lines = { 
      lineWidth: (lineKey === line.key) ? 3 : 0.5 
     } 
     $.plot("#placeholder", data, {grid : {hoverable: true}}); 
    }); 
    } 

    var previousPoint = null; 
    $('#placeholder').on('plothover', function(e, position, item){ 
    if (item) { 
     if (previousPoint == null || previousPoint[0] !== item.seriesIndex || previousPoint[1] !== item.dataIndex) { 
     previousPoint = [item.seriesIndex, item.dataIndex]; 
     plotChart(item.series.key); 
     } 
    } else { 
     plotChart(); 
     previousPoint = null;    
    } 
    }); 

    plotChart(); 
}); 

टिप्पणी - यह केवल काम करता है जब एक वास्तविक डाटापॉइंट पर मँडरा।