Highcharts: टूलटिप किसी अन्य DOM तत्व द्वारा अतिप्रवाहित है

_समाधान_
कस्टम एचटीएमएल <div> का उपयोग करें और सीएसएस शैलियों को लागू करें।

डेमो:

• http://jsfiddle.net/7wVDV/147/

वैकल्पिक हल

एक वैकल्पिक दृष्टिकोण भी है, जो आपको मूल टूलटिप के छोटे सूचक को संरक्षित करने देता है। यह टूलटिप को एक अलग svg बॉक्स में रखता है: http://jsfiddle.net/gh/get/jquery/1.7.2/highcharts/highcharts/tree/master/samples/highcharts/studies/tooltip-outside -डिब्बा/।

@sebastianbochan धन्यवाद, ऐसा लगता है कि यह एक अच्छा दृष्टिकोण है, लेकिन यह मेरी समस्या का समाधान नहीं करता है, क्योंकि जैसा कि मैंने कहा था कि मेरा चार्ट अतिप्रवाह के साथ एक div में लपेटा गया है: स्क्रॉल करें।
किसी समस्या के लिए इस फिडेल को देखें http://jsfiddle.net/7wVDV/201/

अन्य समाधान काम करता है: http://jsfiddle.net/highcharts/7wVDV/202/

धन्यवाद, @TorsteinHonsi समाधान के लिए, मैं इसे आज़माउंगा।
क्या विकल्प 'appendToBody' smth है जिसे आप भविष्य में रिलीज में लागू करने की उम्मीद कर रहे हैं?

@TorsteinHonsi समाधान के साथ कुछ समस्याएं हैं।

1. यदि टूलटिप स्क्रीन के किनारे पर बनाई गई है तो स्क्रॉलबार शरीर पर दिखाई दे रहा है। http://jsfiddle.net/gh/get/jquery/1.7.2/highcharts/highcharts/tree/master/samples/highcharts/studies/tooltip-outside-box/ (डेमो विंडो की चौड़ाई को 2 चार्ट की चौड़ाई पर सेट करें और पहले होवर करें दाएं से बिंदु)

2. IE11 में setSize (JS लाइन 86) एक छोटा व्यू बॉक्स नहीं बना रहा है। उदाहरण के लिए यह डेमो क्रोम में कट टूलटिप और IE11 में एक सामान्य टूलटिप दिखाता है। http://jsfiddle.net/Lguddypf/

3. तालिका में प्रदर्शित होने पर और आपको चार्ट देखने के लिए स्क्रॉल करने की आवश्यकता होती है, तो टूलटिप स्थिति गलत है: http://jsfiddle.net/Lguddypf/1/ (चार्ट पर साइट स्क्रॉल करें और टूलटिप स्थिति देखने के लिए एक बिंदु पर होवर करें) बाईं ओर ले जाया गया।

कृपया iPad या Chrome पर http://jsfiddle.net/1jp9e4rw/3/show/ खोलें। डेटा बिंदु के नीचे दिखाई देने वाले टूलटिप्स के एंकर प्रदर्शित नहीं होते हैं:

यह टूलटिप-आउटसाइड-बॉक्स अध्ययन के साथ समस्या है। मानक कार्यान्वयन के साथ, टूलटिप्स ठीक हैं।

उपरोक्त समस्या का समाधान: http://jsfiddle.net/1jp9e4rw/9/

@pawelfus हमने वास्तव में हमारे कोड में (H.wrap ()) के आसपास इसी तरह के काम की कोशिश की है, लेकिन यह पता चला है कि समाधान कभी भी पूरी तरह से समस्या का समाधान नहीं कर रहा है, उदाहरण के लिए हमारे मामले में, इसमें कुछ प्रदर्शन और पहुंच की समस्या हो सकती है , और यहां तक ​​​​कि सफारी ब्राउज़र पर भी, टूलटिप स्थिति की गणना क्रोम ब्राउज़र के समान नहीं की जाती है। इसलिए उपभोक्ता पक्ष पर रैप का उपयोग करके बग को हल करने का प्रयास करने के बजाय, हाईचार्ट्स के लिए मूल कोड में इस समस्या को ठीक करना बहुत अच्छा होगा।

मैं देख रहा हूं कि इस बग को एक वर्ष से अधिक समय से दायर किया गया है। क्या इस बग को ठीक करने के लिए कोई समयरेखा या योजना है?

मैं इस बग के लिए एक देशी सुधार भी चाहूंगा।
JQuery स्क्रिप्ट की प्रतिलिपि बनाना ठीक काम नहीं कर रहा है, कुछ उदाहरण इसे और भी बदतर बना देते हैं।

प्लगइन-आधारित समाधान पर निर्भर होने के बजाय देशी फिक्स के लिए +1। हम इस मुद्दे में हमारे आवेदन में भी चल रहे हैं।

Paweł द्वारा सुझाए गए समाधान यहां दिए गए हैं, लेकिन jQuery के बिना (और विंडो और दस्तावेज़ आकार प्राप्त करने के लिए समान गणना का उपयोग किया जाता है) - http://jsfiddle.net/BlackLabel/1jp9e4rw/10/

बहुत अच्छा कामकाज नहीं :(

नमस्ते @MiroLiska
स्क्रॉलबार शैली और JSFiddle लोगो त्रुटि से अनुमान लगाना - यह IE11 है।
उस ब्राउज़र में Paweł का डेमो समान दिखता है - मैंने केवल jQuery निर्भरता को हटा दिया है, कोड/तर्क में कुछ भी सुधार नहीं हुआ है।
बीटीडब्ल्यू: यह स्क्रॉलिंग के कारण होता है

यह कैसे है? http://jsfiddle.net/BlackLabel/1jp9e4rw/11/
स्क्रॉल बार जंप से बचने के लिए एनिमेशन अक्षम है, लेकिन आप टूलटिप के एनिमेशन को रैप कर सकते हैं ताकि यह सुनिश्चित हो सके कि यह केवल उपलब्ध स्थान पर एनिमेट है या किसी स्क्रॉलबार कार्रवाई को ट्रिगर नहीं करेगा।

@KacperMadej इसके लिए आपका बहुत-बहुत धन्यवाद! हम अपने ऐप में एक समान समस्या में चल रहे हैं जहां हमें अन्य डीओएम तत्वों पर ओवरलैप करने के लिए टूलटिप्स की आवश्यकता है। आपका नया समाधान बहुत बेहतर है। हालांकि, एक छोटी सी आलोचना यह है कि यदि आपके पास एकाधिक श्रृंखलाओं के साथ लाइन चार्ट हैं, यदि आप किसी अन्य श्रृंखला पर जाने के लिए टूलटिप पर होवर करते हैं, तो कुछ भी नहीं होता है और अनुभव बहुत अच्छा नहीं होता है।

मुझे लगता है कि यहां मुद्दा यह है कि mouseOver ईवेंट को निकाल नहीं दिया जाता है यदि यह टूलटिप पर होवर हो रहा है। लेकिन यह सिर्फ एक धारणा है

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

नमस्ते @ jackyliang

बहुत समय पहले mouseOver और होवरिंग टूलटिप (हाईचार्ट्स v4.0 के आसपास) के साथ एक बग था - यह कोई समस्या नहीं होनी चाहिए क्योंकि हम निकटतम बिंदुओं को खोजने के लिए केडी-पेड़ का उपयोग करते हैं। शायद यह एक प्रतिगमन है? क्या आप jsFiddle में इस मुद्दे को फिर से बना सकते हैं और इसे साझा कर सकते हैं? धन्यवाद!

useHTML के संबंध में - हाँ, यह एक सीमा है।

मुझे लगता है कि यहां वास्तव में एक स्टैंडअलोन टूलटिप की जरूरत है, जो चार्ट से बिल्कुल भी संबंधित नहीं है। उदाहरण के लिए, हम सरल <div> का उपयोग कर सकते हैं जो माउसओवर पर अपडेट किया जाएगा और माउसआउट पर छुपाया जाएगा, डेमो: http://jsfiddle.net/BlackLabel/xctq42n8/1/ - अब हम टूलटिप के अंदर कुछ भी लिख सकते हैं, केवल एक चीज जिसमें सुधार की आवश्यकता है वह है स्थिति (डेमो चार्ट के संबंध में केवल बिंदु की स्थिति का उपयोग करता है, दस्तावेज़ में चार्ट की स्थिति गायब है)।

@pawelfus हाय पावेल। हम अभी 6.1 पर हैं (अभी चेक किया गया है)। useHTML की कमी एक बड़ा मुद्दा है, भले ही हम इसे अन्य DOM तत्वों को ओवरफ्लो करने की अनुमति दे सकें। हमारी टीम ने हमारे पुराने d3 चार्ट को हाईचार्ट्स में माइग्रेट करने का लगभग 95% पूरा कर लिया है (जो आपके लिए एक सुखद अनुभव रहा है: D), लेकिन परंपरागत रूप से हमारे टूलटिप्स अन्य डोम तत्वों को ओवरफ्लो करते हैं क्योंकि प्रत्येक चार्ट अपने स्वयं के तत्व में रहता है। तो अभी हाईचार्ट्स के साथ, यह ऐसा दिखता है:

जैसा कि आप बता सकते हैं, इसमें useHTML का उपयोग करके हमारी पुरानी टूलटिप्स 100% से मेल खाने के लिए कस्टम स्टाइल है।

क्या बहुत सारे कस्टम कोड लिखे बिना इस अतिप्रवाह व्यवहार का समर्थन करने के लिए हाईचार्ट्स द्वारा कोई मूल समाधान हो सकता है?

हाय @jackyliang ,
इस समय समाधान केवल समाधान के रूप में उपलब्ध है।

@pawelfus हाय पावेल, मैं यह भी जानना चाहूंगा कि कैसे संभावना है कि हमें यहां एक मूल समाधान मिल रहा है?
हमने हाईचार्ट्स को चुना क्योंकि हम इस तरह की चीजों के लिए वर्कअराउंड लागू नहीं करना चाहते थे, और ऐसा लगता है कि बहुत से लोग इस समस्या में भाग लेते हैं।
चूंकि यहां वर्णित सभी कामकाज में कुछ डाउनसाइड्स हैं, इसके लिए एक स्वच्छ देशी समाधान प्राप्त करना, मेरे लिए सही कदम जैसा लगता है।

@sebastianbochan इसलिए हम जानना चाहते हैं कि हमें मूल समाधान कैसे मिल रहा है। मुझे लगता है कि इस तरह के एक महान पुस्तकालय के लिए इतना बड़ा नकारात्मक पहलू होना अस्वीकार्य है।

@jackyliang @robinv दयालु शब्दों के लिए धन्यवाद! :)

@jackyliang @robinv - इस मुद्दे की लोकप्रियता को देखते हुए हमें इस मुद्दे को हल करने की आवश्यकता होगी। मैं इस समय कोई ईटीए सेट नहीं कर सकता।

आंतरिक नोट:
समाधान टूलटिप वर्ग को चार्ट वर्ग से अलग करना और स्वतंत्र तत्व (मुख्य निकाय?) में प्रस्तुत करना हो सकता है। यहां समस्या टूलटिप और चार्ट/पॉइंटर वर्गों को डिकूप करने की हो सकती है (यह मुश्किल है क्योंकि मैंने उन्नत-स्टॉक डेमो में कोशिश की थी) + हम छवियों के निर्यात टूलटिप को तोड़ सकते हैं ( tooltip.refresh() के माध्यम से)। फिर भी, इसे v7 के लिए लागू करना अच्छा होगा: हम स्टॉक-टूल्स बटन/मेनू-आइटम के लिए आरंभ टूलटिप इंस्टेंस का उपयोग कर सकते हैं और इसे अपनी इच्छानुसार उपयोग कर सकते हैं। @TorsteinHonsi

@robinv ने जो कहा, मैं उसके पक्ष में हूं क्योंकि यह भी प्राथमिक कारणों में से एक है कि हमने हाईचार्ट्स पर स्विच क्यों किया - हम बहुत अधिक कस्टम कोड लिखने से बचना चाहते थे। हमारे पुराने d3 चार्ट में बहुत सारे कस्टम एक्सटेंशन/एन्हांसमेंट थे और थोड़ी देर बाद बदलाव करना एक गड़बड़ और दुःस्वप्न बन गया। मैं यह नहीं कह रहा हूँ कि हम HC को अपनी पसंद के अनुसार अनुकूलित नहीं करना चाहते (कस्टमाइज़ेशन! = एक्सटेंशन), ​​ज्यादातर विशेष रूप से एक्सटेंशन के बारे में बात कर रहे हैं; ऐसे काम करना जो डिफ़ॉल्ट HC अभी तक समर्थन नहीं करता है।

हमारी योजना 2-3 सप्ताह के भीतर हमारे HC एकीकरण को ग्राहकों तक पहुँचाने की है, और हम जानते हैं कि यदि टूलटिप्स अन्य डोम तत्वों पर दिखाई नहीं देते हैं तो ग्राहक शिकायत करेंगे। यदि यह किया जा सकता है, तो हमें न्यूनतम ईटीए मिलता है, जो मुझे अभी के लिए संतुष्ट करेगा, तब से हम यह स्थापित कर सकते हैं कि क्या हम एक कस्टम समाधान (अभी के लिए) लिखने का प्रयास करते हैं या हाईचार्ट्स द्वारा मूल समाधान की प्रतीक्षा करते हैं।

@sebastianbochan मैं यह नोट करना चाहता था कि वर्कअराउंड वास्तव में एक समाधान नहीं है क्योंकि पोजिशनिंग पहलू थोड़ा भद्दा है

मुझे मूल कार्यान्वयन के लिए एक ईटीए देखकर बहुत खुशी होगी या एक प्लगइन जो व्यवहार का अनुकरण करता है (बिना स्थिति/होवर जीत के, और डीओएम ओवरलैप के साथ वर्तमान टूलटिप के कस्टम एचटीएमएल का उपयोग करने की अनुमति देता है)

धन्यवाद @pawelfus और @jackyliang।

पावेल, जैसा कि जैकी ने उल्लेख किया है, हम अगले 2-3 हफ्तों में अपने ग्राहकों के लिए हाईचार्ट्स लॉन्च कर रहे हैं और यह हमारे कार्यान्वयन के प्रमुख अवरोधकों में से एक है। यह देखते हुए कि यह एक विशेषता नहीं एक बग है, क्या यह ऐसी चीज है जिसे हम अगले 2-3 सप्ताह में संबोधित करने की योजना बना सकते हैं?

हाय @pawelfus मैं यह देखने के लिए इस पर अनुवर्ती कार्रवाई करना चाहता था कि क्या इस पर कोई और स्पष्टता है/जब हम जानने की उम्मीद कर सकते हैं? यह अभी हमारी योजना प्रक्रिया के लिए महत्वपूर्ण है इसलिए हम अधिक जानकारी की प्रतीक्षा कर रहे हैं। धन्यवाद!

नमस्ते @wynnandrewj , ईटीए तय होने के बाद हम इस धागे को अपडेट करेंगे। हमारे पास अगले 2-3 हफ्तों में v6.1.1 जारी करने की योजना है, लेकिन मैं इस मुद्दे को शामिल करने के लिए फिक्स का वादा नहीं कर सकता।

हाय @pawelfus , बस इस मुद्दे के बारे में आपके और आपकी टीम के साथ अनुवर्ती कार्रवाई करना चाहता था। हम ग्राहकों के लिए हाईचार्ट लॉन्च करने के बहुत करीब हैं (ग्राहकों के पहले बैच के लिए अधिकतम 2-3 सप्ताह सोचें), और यह निश्चित रूप से एक अवरोधक है। मैं पूरी तरह से समझता हूं कि सटीक तारीख देना मुश्किल है इसलिए मैं इसके बारे में नहीं पूछूंगा। लेकिन कोई भी जानकारी कि क्या इससे निपटा जाएगा, और शायद अनुमानित समयरेखा, की सराहना की जाएगी।

मूल रूप से जो कुछ भी हम आंतरिक रूप से समझ सकते हैं + ग्राहकों के साथ संवाद बहुत बढ़िया होगा।

धन्यवाद!

आपके धैर्य के लिए धन्यवाद @jackyliang , मैं आज इस कोड पर काम करूंगा और शेष मुद्दों पर एक सिंहावलोकन प्राप्त करने का प्रयास करूंगा।

अब हमारे पास एक उम्मीदवार है जिसका आप http://jsfiddle.net/highcharts/fqx10th9/ पर परीक्षण कर सकते हैं।

मेरा मानना ​​​​है कि ऊपर दिए गए मुद्दों को ठीक किया गया है, अर्थात् useHTML , कर्सर को ऊपर ले जाने पर पलक झपकना, और संकीर्ण पृष्ठों पर स्क्रॉलबार दिखाई देना।

कृपया इस उम्मीदवार का परीक्षण करें। सफल होने पर, हम इसे इस सप्ताह रिलीज़, हाईचार्ट्स v6.1.1 का हिस्सा बना देंगे।

@TorsteinHonsi बहुत बहुत धन्यवाद! इसके साथ खेलने के लिए इंतजार नहीं कर सकता।

@TorsteinHonsi
मैंने इसका परीक्षण भी किया, सभी परिदृश्यों में काम करता है।

इसने हमारे लिए सुपर परफेक्ट काम किया और इसे वापस जोड़ने में केवल 30 मिनट लगे। इसे इतनी जल्दी और पूरी तरह से लागू करने के लिए बहुत-बहुत धन्यवाद!

@TorsteinHonsi आपकी पहेली अब काम नहीं करती क्योंकि https://github.highcharts.com/feature/5784-tooltip-outside-box/highcharts.js मौजूद नहीं है। मुझे लगता है कि शाखा हटा दी गई है

@BernardoFBBraga

सफल होने पर, हम इसे इस सप्ताह रिलीज़, हाईचार्ट्स v6.1.1 का हिस्सा बना देंगे।

और यह था, इसलिए हमने ऐसा किया। आप सुविधा का उपयोग करने के लिए Highcharts v6.1.1+ का उपयोग कर सकते हैं
एपीआई संदर्भ: https://api.highcharts.com/highstock/tooltip.outside
डेमो: http://jsfiddle.net/BlackLabel/c70h1akL/1/