Highcharts: Las etiquetas de datos de gráficos circulares se dibujan fuera del lienzo

También tengo este problema. Creo que esto debería etiquetarse como un error en lugar de una mejora, ya que el software no funciona como se esperaba.

+1 en este problema, ¿se podría cambiar el tamaño del pastel automáticamente según las etiquetas de datos?

+1

+1 aquí también. Mi empresa compró una licencia para usar este software recientemente. Arreglar este error sería de gran ayuda. ¿Puede alguien en Highslide intervenir con prioridad/comentar lo que está pasando aquí? Esto ha estado abierto durante un año.

+1. Lo que dijo Randallmorey: exactamente la misma situación. Además, de acuerdo con Rowanmanning, cortar cosas es un error.

Este error se abrió hace 2 años. ¿Cualquier progreso? Los gráficos circulares son inútiles para nosotros si las etiquetas se cortan.
Todavía está marcado como una mejora.

Detectar el espacio necesario para las etiquetas de datos es muy complicado, y
no le dará máxima prioridad en este momento. Tienes que añadir lo que corresponda
márgenes y el tamaño del pastel para evitar esto. También puede establecer el estilo de ancho de la
dataLabels para forzar el ajuste de línea.

+1

Yo también tengo este problema.

esto debe etiquetarse como un error, la mejora significa que funciona correctamente, pero se puede mejorar, lo que obviamente no es el caso aquí.
+1

hola @highslide-software, ¿habrá alguna solución para esto? ¿Puede el gráfico basado en lienzo ser una posible solución?

+1

+1 Yo también tengo este problema.

Yo también

Bueno amigos, intentaré encontrar una solución. Necesitamos una lógica recursiva que dibuje etiquetas de datos, averigüe si se están derramando y luego reduzca recursivamente el tamaño del pastel hasta que todas las etiquetas estén dentro.

Esto es lo que hicimos:

• Cambió la opción de tamaño de tarta predeterminado a nulo. Cuando el tamaño del gráfico circular es nulo, el gráfico circular se ajusta automáticamente dentro del área de trazado. Cuando las etiquetas de datos están deshabilitadas, los sectores llenan el área de trazado por completo. Cuando las etiquetas de datos están habilitadas, las etiquetas de datos también se ajustan dentro del área de trazado.
• Cambió la opción predeterminada del centro circular a [null, null]. El centrado se maneja de forma independiente para la opción X e Y. Nulo significa automático, por lo que el gráfico circular se ajustará dentro del área de trazado siempre que el tamaño también sea nulo.
• Se agregó una opción, minSize. Cuando el tamaño es nulo, no irá por debajo de este.

Población:

• http://jsfiddle.net/highcharts/CjgLg/ . Tome el controlador de cambio de tamaño en la parte inferior derecha para observar cómo se maneja el tamaño automático.
• http://jsfiddle.net/highcharts/9tqSn/ . Como consecuencia del tamaño dinámico, el tamaño del pastel en sí puede cambiar según las etiquetas de datos que estén presentes. Observe cómo cambia a medida que se muestran y ocultan los cortes en esta demostración.

¡Todos los comentarios son apreciados!

Tengo un montón de etiquetas de datos realmente largas (realmente no puedo hacerlas más cortas) que probablemente darán como resultado que el gráfico sea absurdamente pequeño. ¿Hay alguna manera de hacer que las etiquetas se ajusten automáticamente a dos o tres líneas si exceden un cierto ancho?

¡Gracias!

Sí, creo que puede configurar dataLabels.style.width en, digamos, '100px'.

Muchas gracias por esto. ¿Hay una estimación de cuándo se fusionará en 'maestro' o en un lanzamiento?

Tengo un caso en el que muestro varios gráficos circulares en una página en una formación de 2x2. Cada pastel tiene las mismas etiquetas pero diferentes datos.

Entonces, esta solución puede generar 4 pasteles de diferentes tamaños, lo cual no es deseable. ¿Hay alguna manera de evitar esto y aún así hacer que las etiquetas encajen? Realmente lo que quiero es que las etiquetas de datos se ajusten al gráfico, no al pastel. Gracias de antemano.

Esto se lanzará y se fusionará con el maestro cuando Highcharts 3.0 esté disponible, con suerte antes de Navidad.

En el caso de que tenga varias tartas en el mismo gráfico, aún necesita usar el tamaño absoluto. En teoría, creo que lo que describe podría resolverse ajustando cada gráfico y luego use el tamaño de gráfico más pequeño para todos. Pero no estoy seguro de cómo funcionará esto en la práctica, ya que los gráficos circulares se ajustan dentro del área de trazado y no entre sí.

@highslide-software Tenga en cuenta que los ejemplos anteriores no funcionan debido a la CDN para gráficos altos. He arreglado los ejemplos de violín para cualquier persona interesada en ellos:

http://jsfiddle.net/CjgLg/13/ . Tome el controlador de cambio de tamaño en la parte inferior derecha para observar cómo se maneja el tamaño automático.
http://jsfiddle.net/9tqSn/11/ . Como consecuencia del tamaño dinámico, el tamaño del pastel en sí puede cambiar según las etiquetas de datos que estén presentes. Observe cómo cambia a medida que se muestran y ocultan los cortes en esta demostración.

¡Gracias por la solución! +1 :)

Tengo un problema con esta función de tamaño automático en las donas. Funciona bien para tartas individuales, pero cuando se usa en una tarta de 2 series (es decir, una dona), tanto la tarta interior como la exterior se redimensionan de forma independiente. En particular, cuando el gráfico circular interno no tiene leyendas en forma de araña y el circular externo sí las tiene, el gráfico circular interno no se redimensiona en absoluto y el circular externo sí se redimensiona para encajar en la ventana gráfica. Esto da como resultado un gráfico distorsionado (por lo general, el gráfico circular interno se vuelve más ancho que el circular externo, lo que rompe por completo la apariencia y la semántica del gráfico).

¿Hay alguna posibilidad de que amplíes esta corrección para admitir también las donas, como un gran pastel único?

Aquí hay un ejemplo: http://jsfiddle.net/mmarchetta/34VAT/2/

El pastel que parece ser el exterior allí (verde/azul) es en realidad el pastel interior, y el que tiene más porciones que parece ser el interior es en realidad el exterior.

¡Gracias!

Tengo el mismo problema con el gráfico de anillos, las etiquetas se extienden fuera del gráfico.

Este caso muestra cómo se recortan las etiquetas: http://jsfiddle.net/highcharts/7okk430t/

Trabajé en esto y exploré la lógica para agregar puntos suspensivos a las etiquetas de datos desbordadas. Actualmente funciona bien en gráficos estáticos, pero falla al cambiar el tamaño o actualizar el gráfico de forma dinámica.

Se puede ver una demostración en vivo en http://jsfiddle.net/highcharts/7okk430t/1/.

.. y aquí está la diferencia:

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

Probé el javascript desde aquí (http://jsfiddle.net/CjgLg/13/) y obtuve lo siguiente:

TypeError no detectado: $(...).resizable no es una función

El método resizable requiere jQuery UI.

Ah... importé estos 2 (jquery-ui.css y jquery-ui.min.js) y funcionan bien ahora, ¡gracias!

También tengo etiquetas de datos cortadas.

+1 para que la solución de puntos suspensivos se implemente en gráficos altos.

¿Por qué se cierra este tema? Se inició en 2011, pero todavía tengo este problema en 2017.

esto sigue pasando

Estoy usando la versión 5.0.11
Y todavía está sucediendo en el gráfico de anillos.