Highcharts: يتم رسم تسميات بيانات المخطط الدائري خارج اللوحة

أواجه هذه المشكلة أيضًا - أعتقد أنه يجب تصنيف هذا على أنه خطأ وليس تحسين ، لأن البرنامج لا يعمل كما هو متوقع

+1 في هذه المشكلة ، هل يمكن تغيير حجم الكعكة تلقائيًا اعتمادًا على تسميات البيانات ؟؟

+1

+1 هنا أيضًا. اشترت شركتي ترخيصًا لاستخدام هذا البرنامج مؤخرًا. إصلاح هذا الخطأ سيساعد بشكل كبير. هل يمكن لأي شخص في Highslide أن يتناغم مع الأولوية / التعليق على ما يحدث هنا؟ هذا كان مفتوحا لمدة عام.

+1. ما قاله راندالموري - نفس الوضع بالضبط. أيضًا ، اتفق مع Rowanmanning ، فإن تقطيع الأشياء هو خطأ.

تم فتح هذا الخطأ منذ عامين. أي تقدم؟ تعتبر المخططات التفصيلية غير مجدية بالنسبة لنا إذا تم قطع الملصقات.
لا يزال يتم تمييزه كتعزيز.

الكشف عن المساحة اللازمة لملصقات البيانات أمر معقد للغاية ، ونحن
لن يعطيها أولوية قصوى في هذا الوقت. تحتاج إلى إضافة المناسب
هوامش وحجم دائري لتجنب ذلك. يمكنك أيضًا تعيين نمط عرض ملف
تسميات البيانات لفرض التفاف النص.

+1

أنا أيضا أواجه هذه المشكلة.

يجب وضع علامة على هذا على أنه خطأ ، والتحسين يعني أنه يعمل بشكل صحيح ولكن يمكن تحسينه وهذا ليس هو الحال هنا بوضوح.
+1

مرحبا @ highslide-software ، هل سيكون هناك أي حل لهذا؟ هل يمكن أن يكون الرسم البياني القائم على قماش حلاً ممكنًا؟

+1

+1 أواجه هذه المشكلة أيضًا.

أنا أيضا

حسنًا يا رفاق ، سأحاول التوصل إلى حل. نحتاج إلى منطق تكراري يرسم تسميات البيانات ، ويكتشف ما إذا كانت تتسرب ، ثم نقوم بتقليل حجم الفطيرة بشكل متكرر حتى يتم إدخال جميع الملصقات.

هذا ما فعلناه:

• تم تغيير خيار حجم الفطيرة الافتراضي إلى لاغٍ. عندما يكون حجم الفطيرة فارغًا ، يتم تركيبها تلقائيًا داخل منطقة قطعة الأرض. عندما يتم تعطيل تسميات البيانات ، تملأ الفطائر منطقة الرسم بالكامل. عند تمكين تسميات البيانات ، يتم أيضًا تركيب تسميات البيانات داخل منطقة الرسم.
• تم تغيير خيار مركز الفطيرة الافتراضي إلى [فارغ ، فارغ]. تتم معالجة التمركز بشكل مستقل لخيار X و Y. Null تعني تلقائي ، لذا ستلائم الكعكة داخل منطقة قطعة الأرض كلما كان الحجم فارغًا أيضًا.
• تمت إضافة خيار minSize. عندما يكون الحجم فارغًا ، فلن يقل عن هذا الحجم.

العروض التوضيحية:

• http://jsfiddle.net/highcharts/CjgLg/ . أمسك بمقبض تغيير الحجم في الجزء السفلي الأيمن لملاحظة كيفية التعامل مع الحجم التلقائي.
• http://jsfiddle.net/highcharts/9tqSn/ . نتيجة للحجم الديناميكي ، قد يتغير حجم الكعكة نفسها اعتمادًا على تسميات البيانات الموجودة. لاحظ كيف يتغير ذلك عندما يتم عرض الشرائح وإخفائها في هذا العرض التوضيحي.

نقدر كل التعليقات!

لدي مجموعة من تسميات البيانات الطويلة جدًا (لا يمكنني حقًا جعلها أقصر) والتي من المحتمل أن تؤدي إلى أن يكون المخطط صغيرًا بشكل سخيف. هل هناك طريقة لجعل الملصقات تلتف تلقائيًا إلى سطرين أو ثلاثة إذا تجاوزت عرضًا معينًا؟

شكرا!

نعم ، أعتقد أنه يمكنك تعيين dataLabels.style.width إلى "100 بكسل" مثلاً.

شكرًا جزيلاً على هذا - هل هناك تقدير لموعد دمج هذا في "رئيسي" أو في إصدار؟

لدي حالة أعرض فيها مخططات دائرية متعددة على صفحة واحدة بتكوين aa 2x2. كل فطيرة لها نفس التسميات لكن بيانات مختلفة.

لذلك قد ينتج عن هذا الحل 4 فطائر بأحجام مختلفة وهو أمر غير مرغوب فيه - هل هناك طريقة لتجنب ذلك مع الاستمرار في جعل الملصقات مناسبة؟ ما أريده حقًا هو تعديل البيانات لتلائم المخطط ، وليس الكعكة. شكرا مقدما.

سيتم إصدار هذا ودمجه في الإصدار الرئيسي عندما يتم إصدار Highcharts 3.0 ، ونأمل أن يكون ذلك قبل عيد الميلاد.

في حالة وجود العديد من الفطائر في نفس الرسم البياني ، ما زلت بحاجة إلى استخدام الحجم المطلق. من الناحية النظرية ، أعتقد أن ما تصفه يمكن حله عن طريق تعديل كل فطيرة ، ثم استخدام أصغر حجم للفطيرة لهم جميعًا. لكنني لست متأكدًا من كيفية عمل ذلك عمليًا ، حيث يتم تعديل الفطائر داخل منطقة قطعة الأرض وليس بالنسبة لبعضها البعض.

@ highslide-software لاحظ أن الأمثلة أعلاه لا تعمل بسبب CDN للرسوم البيانية العالية. لقد أصلحت أمثلة الكمان لأي شخص مهتم بها:

http://jsfiddle.net/CjgLg/13/ . أمسك بمقبض تغيير الحجم في الجزء السفلي الأيمن لملاحظة كيفية التعامل مع الحجم التلقائي.
http://jsfiddle.net/9tqSn/11/ . نتيجة للحجم الديناميكي ، قد يتغير حجم الكعكة نفسها اعتمادًا على تسميات البيانات الموجودة. لاحظ كيف يتغير ذلك عندما يتم عرض الشرائح وإخفائها في هذا العرض التوضيحي.

شكرا على الإصلاح! +1 :)

لدي مشكلة مع ميزة التحجيم التلقائي هذه على الكعك. تعمل بشكل جيد مع الفطائر المفردة ، ولكن عند استخدامها على فطيرة من سلسلتين (أي دونات) ، يتم تغيير حجم الفطائر الداخلية والخارجية بشكل مستقل. على وجه الخصوص ، عندما لا تحتوي الفطيرة الداخلية على أساطير تشبه العنكبوت ويكون بها الفطيرة الخارجية ، لا يتم تغيير حجم الفطيرة الداخلية على الإطلاق ويتم بالفعل تغيير حجم الفطيرة الخارجية لتناسب منفذ العرض. ينتج عن هذا مخطط مشوه (عادةً ما تصبح الدائرة الداخلية أوسع من المخطط الدائري الخارجي ، مما يؤدي إلى كسر مظهر المخطط ودلالاته تمامًا).

هل هناك أي فرصة لتمديد هذا الإصلاح لدعم الكعك أيضًا ، كفطيرة واحدة كبيرة؟

هذا مثال: 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.

آه ... استوردت هذين (jquery-ui.css و jquery-ui.min.js) وتعمل بشكل جيد الآن ، شكرًا!

لدي أيضًا ملصقات بيانات مقطوعة.

+1 لتطبيق حل القطع في مخططات عالية.

لماذا تم إغلاق هذه القضية؟ لقد بدأ في عام 2011 ، لكن ما زلت أعاني من هذه المشكلة في عام 2017.

لا يزال هذا يحدث

أنا أستخدم الإصدار 5.0.11
ولا يزال يحدث على الرسم البياني الدائري المجوف.