Highcharts: पाई चार्ट डेटा लेबल कैनवास के बाहर खींचे जाते हैं

मुझे यह समस्या भी आ रही है - मुझे लगता है कि इसे एन्हांसमेंट के बजाय बग के रूप में लेबल किया जाना चाहिए, क्योंकि सॉफ़्टवेयर अपेक्षा के अनुरूप काम नहीं करता है

इस मुद्दे पर +1, डेटा लेबल के आधार पर पाई को स्वचालित रूप से आकार दिया जा सकता है ??

+1

+1 यहाँ भी। मेरी कंपनी ने हाल ही में इस सॉफ़्टवेयर का उपयोग करने के लिए लाइसेंस खरीदा है। इस बग को ठीक करने से काफी मदद मिलेगी। क्या हाईस्लाइड में कोई भी यहां क्या हो रहा है, इस पर प्राथमिकता/टिप्पणी के साथ झंकार कर सकता है? यह एक साल से खुला है।

+1। रान्डेलमोरी ने क्या कहा - ठीक वैसी ही स्थिति। इसके अलावा, रोवनमैनिंग से सहमत हैं, चीजों को काटना एक बग है।

इस बग को 2 साल पहले खोला गया था। कोई प्रगति? यदि लेबल काट दिए जाएं तो पाइचार्ट्स हमारे लिए बेकार हैं।
इसे अभी भी एक एन्हांसमेंट के रूप में चिह्नित किया गया है।

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

+1

मुझे भी यह समस्या हो रही है।

इसे एक बग के रूप में टैग किया जाना चाहिए, एन्हांसमेंट का अर्थ है कि यह ठीक से काम कर रहा है लेकिन इसमें सुधार किया जा सकता है जो स्पष्ट रूप से यहाँ नहीं है।
+1

अरे @ हाईस्लाइड-सॉफ्टवेयर, क्या इसका कोई समाधान होने वाला है? क्या कैनवास आधारित चार्ट एक संभावित समाधान हो सकता है?

+1

+1 मुझे भी यह समस्या हो रही है।

मैं भी

ठीक है दोस्तों, मैं एक समाधान के साथ आने की कोशिश करूँगा। हमें कुछ पुनरावर्ती तर्क की आवश्यकता है जो डेटा लेबल खींचता है, यह पता लगाता है कि क्या वे बाहर फैल रहे हैं, फिर पाई के आकार को तब तक कम करें जब तक कि सभी लेबल अंदर न हों।

यहाँ हमने क्या किया:

• डिफ़ॉल्ट पाई आकार विकल्प को शून्य में बदल दिया। जब पाई का आकार शून्य होता है, तो पाई स्वचालित रूप से प्लॉट क्षेत्र के भीतर फिट हो जाती है। जब डेटा लेबल अक्षम होते हैं, तो पाई प्लॉट क्षेत्र को पूरी तरह से भर देती है। जब डेटा लेबल सक्षम होते हैं, तो डेटा लेबल भी प्लॉट क्षेत्र के भीतर फिट किए जाते हैं।
• डिफ़ॉल्ट पाई केंद्र विकल्प को [null, null] में बदल दिया। एक्स और वाई विकल्प के लिए केंद्र को स्वतंत्र रूप से नियंत्रित किया जाता है। नल का मतलब ऑटो है, इसलिए पाई प्लॉट क्षेत्र के अंदर फिट हो जाएगी जब भी आकार भी शून्य होगा।
• एक विकल्प जोड़ा गया, minSize। जब आकार शून्य होगा, तो यह इससे नीचे नहीं जाएगा।

प्रदर्शन:

• http://jsfiddle.net/highcharts/CjgLg/ । ऑटोसाइज़ को कैसे हैंडल किया जाता है, यह देखने के लिए नीचे दाईं ओर आकार बदलने वाले हैंडल को पकड़ें।
• http://jsfiddle.net/highcharts/9tqSn/ । गतिशील आकार के परिणाम के रूप में, डेटा लेबल मौजूद होने के आधार पर पाई का आकार स्वयं बदल सकता है। ध्यान दें कि यह कैसे बदलता है क्योंकि इस डेमो में स्लाइस दिखाए और छिपे हुए हैं।

सभी टिप्पणियों की सराहना की जाती है!

मेरे पास वास्तव में लंबे डेटा लेबल का एक गुच्छा है (मैं वास्तव में उन्हें छोटा नहीं कर सकता) जिसके परिणामस्वरूप चार्ट बेतुका रूप से छोटा होगा। क्या एक निश्चित चौड़ाई से अधिक होने पर लेबल को दो या तीन पंक्तियों में ऑटो रैप करने का कोई तरीका है?

धन्यवाद!

हां, मुझे लगता है कि आप dataLabels.style.width को '100px' पर सेट कर सकते हैं।

इसके लिए बहुत-बहुत धन्यवाद - क्या इसका कोई अनुमान है कि इसे 'मास्टर' में या किसी रिलीज़ में कब मर्ज किया जाएगा?

मेरे पास एक ऐसा मामला है जहां मैं आ 2x2 गठन में एक पृष्ठ पर एकाधिक पाई चार्ट प्रदर्शित कर रहा हूं। प्रत्येक पाई में समान लेबल होते हैं लेकिन अलग-अलग डेटा होते हैं।

तो यह समाधान 4 अलग-अलग आकार के पाई उत्पन्न कर सकता है जो वांछनीय नहीं है - क्या इससे बचने का कोई तरीका है और फिर भी लेबल फिट हैं? वास्तव में मैं चाहता हूं कि चार्ट में फिट होने के लिए डेटालैबल्स को समायोजित किया जाए, न कि पाई। अग्रिम धन्यवाद।

क्रिसमस से पहले, हाईचार्ट्स 3.0 के बाहर होने पर इसे जारी किया जाएगा और मास्टर में विलय कर दिया जाएगा।

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

@ हाईस्लाइड-सॉफ़्टवेयर ध्यान दें कि ऊपर दिए गए उदाहरण हाईचार्ट्स के लिए सीडीएन के कारण काम नहीं कर रहे हैं। मैंने उनमें रुचि रखने वाले किसी भी व्यक्ति के लिए पहेली उदाहरण तय किए हैं:

http://jsfiddle.net/CjgLg/13/ । ऑटोसाइज़ को कैसे हैंडल किया जाता है, यह देखने के लिए नीचे दाईं ओर आकार बदलने वाले हैंडल को पकड़ें।
http://jsfiddle.net/9tqSn/11/ । गतिशील आकार के परिणाम के रूप में, डेटा लेबल मौजूद होने के आधार पर पाई का आकार स्वयं बदल सकता है। ध्यान दें कि यह कैसे बदलता है क्योंकि इस डेमो में स्लाइस दिखाए और छिपे हुए हैं।

फिक्स के लिए धन्यवाद! +1 :)

मुझे डोनट्स पर इस ऑटो-साइज़िंग सुविधा में समस्या है। यह एकल पाई के लिए ठीक काम करता है, लेकिन जब 2-श्रृंखला पाई (यानी एक डोनट) पर उपयोग किया जाता है, तो आंतरिक और बाहरी दोनों पाई को स्वतंत्र रूप से आकार दिया जाता है। विशेष रूप से, जब आंतरिक पाई में मकड़ी जैसी किंवदंतियां नहीं होती हैं और बाहरी पाई में उनके पास होती है, तो आंतरिक पाई का आकार बिल्कुल नहीं बदला जाता है और बाहरी पाई को वास्तव में व्यूपोर्ट में फिट करने के लिए आकार दिया जाता है। इसका परिणाम एक विकृत चार्ट में होता है (आमतौर पर आंतरिक पाई बाहरी पाई की तुलना में व्यापक हो जाती है, चार्ट के रूप और शब्दार्थ को पूरी तरह से तोड़ देती है)।

क्या कोई मौका है कि आप इस फिक्स को डोनट्स का समर्थन करने के लिए एक बड़े पाई के रूप में भी बढ़ा सकते हैं?

यहां एक उदाहरण दिया गया है: http://jsfiddle.net/mmarchetta/34VAT/2/

पाई जो वहां बाहरी प्रतीत होती है (हरा/नीला) वास्तव में आंतरिक पाई है, और अधिक स्लाइस वाला जो आंतरिक दिखता है वह वास्तव में बाहरी है।

धन्यवाद!

मेरे पास डोनट चार्ट के साथ एक ही समस्या है, लेबल चार्ट के बाहर फैले हुए हैं।

यह मामला दिखाता है कि लेबल कैसे काटे जाते हैं: http://jsfiddle.net/highcharts/7okk430t/

मैंने इस पर काम किया है और अतिप्रवाहित डेटा लेबल में इलिप्सिस जोड़ने के लिए तर्क की खोज की है। यह वर्तमान में स्थिर चार्ट पर अच्छी तरह से काम करता है, लेकिन चार्ट को गतिशील रूप से आकार देने या अपडेट करने पर टूट जाता है।

एक लाइव डेमो http://jsfiddle.net/highcharts/7okk430t/1/ पर देखा जा सकता है

.. और यहाँ अंतर है:

diff --git a/js/parts/DataLabels.js b/js/parts/DataLabels.js
index c72fabf..a7222c5 100644
--- a/js/parts/DataLabels.js
+++ b/js/parts/DataLabels.js
@@ -619,13 +619,41 @@ if (seriesTypes.pie) {
     * fall within the plot area.
     */
    seriesTypes.pie.prototype.placeDataLabels = function () {
+
+       var chart = this.chart,
+           spacing = chart.spacing;
        each(this.points, function (point) {
            var dataLabel = point.dataLabel,
-               _pos;
+               _pos,
+               overflow,
+               ellipsis;

            if (dataLabel && point.visible) {
                _pos = dataLabel._pos;
                if (_pos) {
+                   
+                   if (dataLabel._attr.align === 'right') {
+                       overflow = _pos.x - dataLabel.width;
+                       if (overflow < spacing[3]) {
+                           ellipsis = true;
+                       }
+                   }
+
+                   if (dataLabel._attr.align === 'left') {
+                       overflow = chart.chartWidth - _pos.x - dataLabel.width - spacing[1] - spacing[3];
+                       if (overflow < spacing[1]) {
+                           ellipsis = true;
+                       }
+                   }
+
+                   if (ellipsis) {
+                       dataLabel._attr.width = dataLabel.width + overflow;
+                       dataLabel.css({
+                           width: dataLabel._attr.width + PX,
+                           textOverflow: 'ellipsis'
+                       });
+                   }
+
                    dataLabel.attr(dataLabel._attr);
                    dataLabel[dataLabel.moved ? 'animate' : 'attr'](_pos);
                    dataLabel.moved = true;
diff --git a/js/parts/SvgRenderer.js b/js/parts/SvgRenderer.js
index 1f8b71d..fcc629d 100644
--- a/js/parts/SvgRenderer.js
+++ b/js/parts/SvgRenderer.js
@@ -10,7 +10,7 @@ SVGElement.prototype = {
    opacity: 1,
    // For labels, these CSS properties are applied to the <text> node directly
    textProps: ['fontSize', 'fontWeight', 'fontFamily', 'fontStyle', 'color', 
-       'lineHeight', 'width', 'textDecoration', 'textShadow'],
+       'lineHeight', 'width', 'textDecoration', 'textOverflow', 'textShadow'],

    /**
     * Initialize the SVG renderer

मैंने यहां से जावास्क्रिप्ट की कोशिश की (http://jsfiddle.net/CjgLg/13/) और निम्नलिखित प्राप्त करें:

ध्यान में न आया लेखन त्रुटि: $(...)। आकार बदलने योग्य कोई फ़ंक्शन नहीं है

resizable विधि के लिए jQuery UI की आवश्यकता होती है।

आह ... इन 2 (jquery-ui.css और jquery-ui.min.js) को आयात किया और अब ठीक काम करता है, धन्यवाद!

मेरे पास डेटा लेबल भी कट रहे हैं।

उच्च चार्ट में लागू किए जाने वाले इलिप्सिस समाधान के लिए +1।

यह मुद्दा क्यों बंद है? यह 2011 में शुरू किया गया था, लेकिन मुझे अभी भी 2017 में यह समस्या है।

यह अभी भी हो रहा है

मैं संस्करण 5.0.11 . का उपयोग कर रहा हूं
और यह अभी भी डोनट चार्ट पर हो रहा है।