हाईचार्ट्स + प्लॉटबैंड टूलटिप होवर + डिफ़ॉल्ट स्टाइल

Question

मैं प्लॉटबैंड पर होवर करते समय टूलटिप दिखाने का सबसे आसान तरीका ढूंढने का प्रयास कर रहा हूं। घटनाओं का हिस्सा ठीक है, मैं माउसओवर और आउट तक पहुंच सकता हूं लेकिन मुझे उसी शैली में एक टूलटिप प्रदर्शित करने का तरीका खोजने की ज़रूरत है क्योंकि डिफॉल्ट लुक और हाईचार्ट्स के लिए महसूस होता है।

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

मैंने docs पर एक नज़र डाली है और कोई मदद नहीं मिली।

कोई विचार?

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

Answer 1

यहां एक समाधान है जिसे मैंने JSFiddle में एक साथ रखा है, हालांकि यह एक हैक का थोड़ा सा है।

माउसओवर घटना में निम्न पंक्ति जोड़ें:

chart.tooltip.refresh(chart.series[1].points[2]); 

यह एक छिपे हुए सीरीज में उचित रूप से रखा बिंदु के लिए टूलटिप प्रदर्शित करता है।

कस्टम टूलटिप फॉर्मेटर फिर आवश्यक टेक्स्ट देता है।

Answer 2

मैंने ग्रेग्स के उत्तर पर आधारित एक और संस्करण बनाया लेकिन इसके बजाय प्लॉटलाइन के लिए, क्योंकि मुझे इसकी आवश्यकता थी। मुझे लगता है कि इसे आसानी से साजिश बैंड में भी अनुवादित किया जाएगा।

यह संस्करण भी घटनाओं के साथ काम करता है, लेकिन इसके बजाय किसी विशेष छिपी श्रृंखला पर निर्भर होने के बजाय एक और div प्रदर्शित करता है।

उदाहरण JSFiddle पर पाया जा सकता है।

तो टूलटिप चार्ट

<div id="tooltip" class="thetooltip"> 
    <p id="tooltiptext" style="margin:0">default</p> 
</div> 

और के रूप में एक ही कंटेनर में जोड़ दिया जाता है जब एक कथानक एक घटना निकाल दिया जाता है जो एक संलग्न टूलटिप

var $tooltip = $('#tooltip'); 
$tooltip.hide(); 
var $text = $('#tooltiptext'); 
displayTooltip = function (text, left) { 
    $text.text(text); 
    $tooltip.show(); 
    $tooltip.css('left', parseInt(left)+24 + 'px'); 
}; 
var timer; 
hideTooltip = function (e) { 
    clearTimeout(timer); 
    timer = setTimeout(function() { 
     $tooltip.fadeOut(); 
    }, 5000); 
}; 

के साथ टूलटिप प्रदर्शित करता है से अधिक उपयोगकर्ता माउस रखता है

और फिर प्रत्येक प्लॉटलाइन को अतिरिक्त विकल्प, टूलटिपटेक्स्ट, और उपरोक्त div को प्रदर्शित करने के लिए ईवेंट के साथ परिभाषित किया गया है।

plotLines: [{ 
    tooltipText: 'hello', 
    value: Date.UTC(2011, 2, 28, 0, 1, 1), 
    color: '#ff6666', 
    dashStyle: 'solid', 
    width: 3, 
    events: { 
     mouseover: function (e) { 
      displayTooltip(this.options.tooltipText, this.svgElem.d.split(' ')[1]); 
     }, 
     mouseout: hideTooltip 
    } 
} 

tooltipText Highcharts एपीआई का हिस्सा नहीं है, लेकिन जब परिभाषित यह तत्व पर विकल्पों संपत्ति के माध्यम से उपलब्ध है।

.thetooltip { 
    border: 1px solid #2f7ed8; 
    background-color: #fff; 
    opacity: 0.8500000000000001; 
    padding: 4px 12px; 
    border-radius: 3px; 
    position: absolute; 
    top:100px; 
    box-shadow: 1px 1px 3px #666; 
} 

Answer 3

एक अन्य समाधान "useHTML साथ plotBands/शिष्टता के" लेबल "संपत्ति का उपयोग करने के होगा:

टूलटिप के लिए सीएसएस बस सीएसएस mimicing द्वारा चूक एक Highcharts द्वारा के समान परिभाषित किया जा सकता : सच "ध्वज और सीएसएस होवर।

xAxis: { 
//...code  
    plotLines: [{ 
     //...code 
     dashStyle: 'Dash', 
     color: '#000000', 
     width: 2, 
     label: { 
      text: `<div class="plotline"> 
        <div id="custom-tooltip" class="thetooltip"> 
         My custom tooltip! 
        </div> 
       </div>`, 
      useHTML: true, 
     } 
    }] 
} 

संशोधित सीएसएस होगा:

.thetooltip { 
    display: none; //the main change 
    border: 1px solid #2f7ed8; 
    background-color: #fff; 
    opacity: 0.8500000000000001; 
    padding: 4px 12px; 
    border-radius: 3px; 
    position: absolute; 
    top:100px; 
    box-shadow: 1px 1px 3px #666; 
} 

और कथानक कक्षा में निश्चित रूप से:

.plotline { 
    &:hover { 
     .thetooltip { 
      display: block; 
     } 
    } 
} 

मेरी राय में, यह एक और अधिक मजबूत समाधान है - पहला, यह एक सीएसएस है समाधान, जेएस नहीं, और यूएक्स/यूआई बिंदु दृश्य से क्विर्की जेएस (बस टाइमआउट सही सेट करने की कोशिश करें!)