जब flot

Question

में एक बिंदु पर घुमाया उदाहरण here से कस्टम टूलटिप प्रदर्शित, मैं एक तरह से एक Flot ग्राफ कि टूलटिप्स जब मँडरा से पता चलता बनाने का तरीका पता है। लेकिन उदाहरण केवल एक्स मान, वाई मान, लेबल इत्यादि वाले टूलटिप्स को प्रदर्शित करने के तरीके को दिखाते हैं, और मैं यह नहीं समझ सकता कि अधिक अनुकूलित टूलटिप्स कैसे बनाएं।

वहाँ किसी ऐसे स्थान पर मैं कस्टम डेटा संलग्न कर सकते हैं है, कि मैं जब टूलटिप बनाने का उपयोग कर सकते हैं?

उदाहरण के लिए, सरल करने के लिए, मेरे कोड लगता है कि लगता है कि चलो:

var d = [ { label: "Fake!", data: [ [1290802154, 0.3], [1292502155, 0.1] ] } ]; 
var options = { 
    xaxis: { mode: "time" }, 
    series: { 
    lines: { show: true }, 
     points: { show: true } 
    }, 
    grid: { hoverable: true, clickable: true } 
}; 
$.plot($("#placeholder"), d, options); 

अब, जब पहली डाटापॉइंट पर क्लिक करके, मैं टूलटिप दिखाने के लिए "हैलो" चाहते हैं, और दूसरा डाटापॉइंट पर जब क्लिक करने मैं "अलविदा" दिखाना चाहता हूं। मैं यह कैसे करु? जब plothover घटना

$(".placeholder").bind("plothover", function (event, pos, item) { /* etc. */ }; 

बाध्यकारी मुझे यकीन है कि क्या "आइटम" को संदर्भित करता है, और कैसे यह करने के लिए डेटा संलग्न करने के लिए नहीं कर रहा हूँ।

Answer 1

यहाँ एक किसी न किसी JSFiddle example कि मैं मार पड़ी है। सुनिश्चित नहीं हैं कि यह वास्तव में कार्य कर रहा है, तो आप इसे कितना पसंद लेकिन एक विचार चिंगारी सकती है ...

[अद्यतन]

आप घटनाओं

क्लिक करने के लिए

$("#placeholder").bind("plotclick", function (event, pos, item) {/* code */}); 

घटना के लिए बाध्य करने के लिए चाहता हूँ

[Update2]Updated Example

मैं आपने अपने परीक्षण डेटा का उपयोग करने के लिए उदाहरण को समायोजित किया है और ऊपर वर्णित किए गए कार्यों के साथ और अधिक काम करने के लिए। item ऑब्जेक्ट के लिए ऐसा लगता है कि यह फ्लाई पर उत्पन्न होता है, इसलिए मैं जो कह सकता हूं, उससे आप अतिरिक्त डेटा नहीं जोड़ सकते हैं। हालांकि, आप item ऑब्जेक्ट्स को कैश करने के लिए एक सरणी बना सकते हैं जब उन्हें क्लिक किया जा सके और उन्हें अतिरिक्त डेटा जोड़ें और hover ईवेंट के लिए उनका उपयोग करें।

यह नया उदाहरण यह है कि, यह सामान्य टूलटिप दिखाता है जब कुछ भी क्लिक नहीं किया जाता है। लेकिन एक बार क्लिक किया गया यह निर्धारित करता है कि क्या बिंदु क्लिक किया गया पहला या दूसरा था और item ऑब्जेक्ट को alternateText नामक ऑब्जेक्ट जोड़ता है और इसे itemsClicked नामक सरणी में संग्रहीत करता है।

अब जब एक बिंदु hovered है पर यह अगर वहाँ सरणी वर्तमान item वस्तु है, जो item.dataIndex के माध्यम से प्राप्त किया जाता है की एक ही सूचकांक के आधार पर भीतर एक कैश्ड item वस्तु को देखने के लिए जाँच करता है। यदि कैश सरणी itemsClicked में कोई मिलान करने वाला अनुक्रमणिका है तो यह item ऑब्जेक्ट को उस पर ले जाएगा और alternateText संपत्ति का उपयोग करेगा जो पहले click ईवेंट के दौरान जोड़ा गया था।

पहला बिंदु के item वस्तु कुछ इस तरह दिखेगा:

item : { 
    dataIndex: 0, 
    datapoint: [ 
     1290802154, 
     0.3 
    ], 
    pageX: 38, 
    pageY: 82, 
    series: {/* properties of the series that this point is in */}, 
    seriesIndex: 0 
} 

एक बार क्लिक यह तो इस प्रकार दिखाई देगा और itemsClicked सरणी में संग्रहीत किया:

item : { 
    alternateText: 'hello', 
    dataIndex: 0, 
    datapoint: [ 
     1290802154, 
     0.3 
    ], 
    pageX: 38, 
    pageY: 82, 
    series: {/* properties of the series that this point is in */}, 
    seriesIndex: 0 
} 

कृपया मुझे तो हमें बताएं इनमें से कोई भी सहायक है या नहीं, अगर नहीं, तो मैं बंद कर दूंगा और अपना उत्तर अपडेट करना बंद कर दूंगा: पी

Answer 2

आप श्रृंखला में डेटा जोड़ सकते हैं इसे डेटा सरणी में जोड़कर।

$.plot(element, [[1, 2], [2, 4]] ...) 

के बजाय

आप

$.plot(element, [[1, 2, "label"], [2, 4, "another label"]] ...) 

और फिर उस जानकारी का उपयोग एक कस्टम लेबल को दिखाने के लिए कर सकते हैं।

एक पूर्ण उदाहरण के लिए इस बेला देखें: http://jsfiddle.net/UtcBK/328/

Answer 3

इसके अलावा

आप कोड निम्न का प्रयास कर सकते हैं:

HTML बॉडी:

<div id="content"> 
    <div class="demo-container"> 
     <div id="placeholder" class="demo-placeholder"></div> 
    </div> 
</div> 

स्क्रिप्ट:

<script type="text/javascript"> 
    function showTooltip(x, y, contents, z) { 
     $('<div id="tooltip">' + contents + '</div>').css({ 
      position: 'absolute', 
      display: 'none', 
      top: y - 30, 
      left: x - 110, 
      'font-weight':'bold', 
      border: '1px solid rgb(255, 221, 221)', 
      padding: '2px', 
      'background-color': z, 
      opacity: '0.8' 
    }).appendTo("body").show(); 
    }; 

    $(document).ready(
       $(function() { 
        var data = [{ 
         "label": "scott", 
         "data": [[1317427200000 - 5000000 * 3, "17017"], [1317513600000 - 5000000 * 5, "77260"]] 
        }, 
     { 
      "label": "martin", 
      "data": [[1317427200000 - 5000000 * 2, "96113"], [1317513600000 - 5000000 * 4, "33407"]] 
     }, 
     { 
      "label": "solonio", 
      "data": [[1317427200000 - 5000000, "13041"], [1317513600000 - 5000000 * 3, "82943"]] 
     }, 
     { 
      "label": "swarowsky", 
      "data": [[1317427200000, "83479"], [1317513600000 - 5000000 * 2, "96357"], [1317600000000 - 5000000, "55431"]] 
     }, 
     { 
      "label": "elvis", 
      "data": [[1317427200000 + 5000000, "40114"], [1317513600000 - 5000000 * 1, "47065"]] 
     }, 
     { 
      "label": "alan", 
      "data": [[1317427200000 + 5000000 * 2, "82504"], [1317513600000, "46577"]] 
     }, 
     { 
      "label": "tony", 
      "data": [[1317513600000 + 5000000, "88967"]] 
     }, 
     { 
      "label": "bill", 
      "data": [[1317513600000 + 5000000 * 2, "60187"], [1317600000000, "39090"]] 
     }, 
     { 
      "label": "tim", 
      "data": [[1317513600000 + 5000000 * 3, "95382"], [1317600000000 + 5000000, "89699"]] 
     }, 
     { 
      "label": "britney", 
      "data": [[1317513600000 + 5000000 * 4, "76772"]] 
     }, 
     { 
      "label": "logan", 
      "data": [[1317513600000 + 5000000 * 5, "88674"]] 
     }]; 

        var options = { 
         series: { 
          bars: { 
           show: true, 
           barWidth: 60 * 60 * 1000, 
           align: 'center' 
          } 
         }, 
         points: { 
          show: true 
         }, 
         lines: { 
          show: true 
         }, 
         grid: { hoverable: true, clickable: true }, 
         yaxes: { 
          min: 0 
         }, 
         xaxis: { 
          mode: 'time', 
          timeformat: "%b %d", 
          minTickSize: [1, "month"], 
          tickSize: [1, "day"], 
          autoscaleMargin: .10 
         } 
        }; 

        $(function() { 
         $.plot($('#placeholder'), data, options); 
        }); 
        $(function() { 
         var previousPoint = null; 
         $("#placeholder").bind("plothover", function (event, pos, item) { 
          if (item) { 
           if (previousPoint != item.datapoint) { 
            previousPoint = item.datapoint; 

            $("#tooltip").remove(); 
            var x = item.datapoint[0], 
        y = item.datapoint[1] - item.datapoint[2]; 
            debugger; 
            showTooltip(item.pageX, item.pageY, y + " " + item.series.label, item.series.color); 
           } 
          } 
          else { 
           $("#tooltip").remove(); 
           previousPoint = null; 
          } 
         }) 
        }); 
       }) 
       ); 
</script>