हाइचार्ट्स - एचटीएमएल टूलटिप और डाटाबेलल्स समस्या प्रस्तुत करते हैं

Question

यहां मेरी समस्या है, जब आप उपयोग HTML सेट करते हैं: datalabels के लिए सच है, ऐसा लगता है कि लेबल टेक्स्ट टूलटिप पृष्ठभूमि को ओवरराइड करेगा।

आप इस सरल बेला में व्यवहार देख सकते हैं: एक बार पर माउस पर एक टूलटिप प्रदर्शित करने के लिए bar chart

प्रयास करें, और आप टूलटिप पृष्ठभूमि में datalabel का पाठ देखेंगे।

क्या डेटा लेबल पर जेड-इंडेक्स सेट करना संभव है?

मैं टूलटिप परिभाषा लेकिन सफलता नहीं मिली जोड़ने के लिए कोशिश की है:

style : { 
    color: 'black', 
    'z-index': 0 
    }, 

मैं भी डेटा लेबल और टूलटिप्स के लिए अवधि कक्षाएं स्थापित करने के लिए तो सीएसएस में एक z- सूचकांक जोड़ने की कोशिश की है इन वर्गों के लिए गुण, लेकिन यह अभी भी काम नहीं कर रहा है।

संपादित करें: जैसा कि मैं अभी भी अपनी समस्या का हल ढूंढ रहा हूं, क्या कोई मुझे चार्ट के बार (या डाटाटाबल्स) में कक्षा जोड़ने का तरीका बता सकता है? मेरा लक्ष्य इस वर्ग पर एक विशिष्ट ऑनक्लिक घटना को कॉल करना है।

Answer 1

ठीक है पर इस संपत्ति के साथ हल किया गया था, इसलिए यहाँ मेरी समस्या के लिए एक समाधान नहीं है ... विचार अपने स्वयं के कस्टम टूलटिप तैयार करना है।

समाधान Highcharts मंच पर दिया गया था: Highcharts forum post

ऐसा करने के लिए, दोनों datalabels और टूलटिप्स पर 'useHTML' गुण सेट formatters कार्यों में टूलटिप्स और सेटअप सीएसएस वर्ग के कुछ चूक गुण को दूर :

//JS 
datalabels: { 
    ... 
    useHTML: true, 
    formatter: function() { 
     return ("<span class='datalabel'>" + this.y + "</span>"); 
    } 
} 

tooltip: { 
    ... 
    borderWidth:0, 
    borderRadius:0, 
    shadow:false, 
    useHTML: true, 
    formatter: function() { 
     return ("<div class='tooltip'>" + this.y + "</div>"); 
    } 
} 

अंतिम चरण (सबसे महत्वपूर्ण) Highcharts-टूलटिप span class के लिए सीएसएस नियम (जो Highcharts द्वारा किया जाता है HTML टूलटिप्स रेंडर करने के लिए) स्थापित करने के लिए है।

//CSS 
.highcharts-tooltip span { 
    background-color:white; 
    z-index:9999!important; 
} 

जेड-इंडेक्स संपत्ति पर ध्यान दें, यह वह संपत्ति है जो टूलटिप को डाटलैबेल पर प्रस्तुत करने की अनुमति देगी।

अब आप 'टूलटिप' वर्ग के लिए सीएसएस नियमों को सेट करके अपने टूलटिप को अनुकूलित कर सकते हैं। Custom tooltip

नोट::

एक पूर्ण लाइव उदाहरण के लिए, jsfiddle यहाँ देख यह काम करता है के लिए इस समाधान के लिए फ़ॉर्मेटर में datalabel वर्ग specificy लिए अनिवार्य नहीं है, मैं सिर्फ इसलिए मैं एक विशिष्ट माउस रजिस्टर कर सकते हैं की जरूरत है इस पर घटना

Answer 2

टूलटिप पृष्ठभूमि रंग के लिए http://api.highcharts.com/highcharts#tooltip.backgroundColor देखें।

एक ही तरह समस्या highslide forum