Highcharts: Os rótulos de dados do gráfico de pizza desenham fora da tela

Também estou tendo esse problema - acho que isso deve ser rotulado como um bug em vez de um aprimoramento, pois o software não funciona conforme o esperado

+1 nesta questão, a torta pode ser dimensionada automaticamente dependendo dos rótulos de dados ??

+1

+1 aqui também. Minha empresa adquiriu recentemente uma licença para usar este software. Corrigir este bug seria uma grande ajuda. Alguém no Highslide pode entrar em contato com prioridade/comentário sobre o que está acontecendo aqui? Este está aberto há um ano.

+1. O que Randallmorey disse - exatamente a mesma situação. Além disso, concordo com rowanmanning, cortar coisas é um bug.

Este bug foi aberto há 2 anos. Algum progresso? Os gráficos de pizza são inúteis para nós se os rótulos forem cortados.
Ainda está marcado como um aprimoramento.

Detectar o espaço necessário para rótulos de dados é muito complicado, e nós
não dará prioridade máxima neste momento. Você precisa adicionar o apropriado
margens e tamanho da torta para evitar isso. Você também pode definir o estilo de largura do
dataLabels para forçar a quebra de linha.

+1

Também estou com esse problema.

isso deve ser marcado como um Bug, Enhancement significa que está funcionando corretamente, mas pode ser melhorado, o que não é o caso aqui, obviamente.
+1

ei @highslide-software , haverá alguma solução para isso? o gráfico baseado em tela pode ser uma solução possível?

+1

+1 Estou tendo esse problema também.

eu também

Bom pessoal, vou tentar achar uma solução. Precisamos de alguma lógica recursiva que desenhe rótulos de dados, descubra se eles estão se espalhando e então reduza recursivamente o tamanho da torta até que todos os rótulos estejam dentro.

Aqui está o que fizemos:

• Alterada a opção de tamanho de pizza padrão para nulo. Quando o tamanho da pizza é nulo, a pizza é ajustada automaticamente na área de plotagem. Quando os rótulos de dados estão desabilitados, as tortas preenchem completamente a área de plotagem. Quando os rótulos de dados estão habilitados, os rótulos de dados também são ajustados na área de plotagem.
• Alterada a opção de centro de pizza padrão para [null, null]. A centralização é feita independentemente para a opção X e Y. Null significa auto, então a pizza caberá dentro da área de plotagem sempre que o tamanho também for nulo.
• Adicionada uma opção, minSize. Quando o tamanho for nulo, ele não ficará abaixo disso.

Demonstrações:

• http://jsfiddle.net/highcharts/CjgLg/ . Pegue a alça de redimensionamento no canto inferior direito para observar como o tamanho automático é tratado.
• http://jsfiddle.net/highcharts/9tqSn/ . Como consequência do tamanho dinâmico, o tamanho do bolo em si pode mudar dependendo de quais rótulos de dados estão presentes. Observe como isso muda conforme as fatias são mostradas e ocultas nesta demonstração.

Todos os comentários são apreciados!

Eu tenho um monte de rótulos de dados muito longos (não posso torná-los mais curtos) que provavelmente resultarão em um gráfico absurdamente pequeno. Existe uma maneira de fazer os rótulos quebrarem automaticamente em duas ou três linhas se excederem uma certa largura?

Obrigado!

Sim, acho que você pode definir o dataLabels.style.width para, digamos, '100px'.

Muito obrigado por isso - Existe uma estimativa de quando isso será mesclado em 'master' ou em uma versão?

Eu tenho um caso em que estou exibindo vários gráficos de pizza em uma página em uma formação 2x2. Cada pizza tem os mesmos rótulos, mas dados diferentes.

Portanto, esta solução pode gerar 4 tortas de tamanhos diferentes, o que não é desejável - existe uma maneira de evitar isso e ainda fazer os rótulos se encaixarem? Realmente o que eu quero é que os datalabels sejam ajustados para caber no gráfico, não na torta. Obrigado antecipadamente.

Isso será lançado e mesclado ao master quando o Highcharts 3.0 for lançado, espero que antes do Natal.

No caso de você ter várias pizzas no mesmo gráfico, ainda será necessário usar o tamanho absoluto. Em teoria, acho que o que você descreve pode ser resolvido ajustando cada torta e, em seguida, use o menor tamanho de torta para todos eles. Mas não tenho certeza de como isso funcionará na prática, já que as tortas são ajustadas dentro da área de plotagem e não em relação umas às outras.

@highslide-software Observe que os exemplos acima não estão funcionando devido ao CDN para gráficos altos. Eu consertei os exemplos de violino para qualquer pessoa interessada neles:

http://jsfiddle.net/CjgLg/13/ . Pegue a alça de redimensionamento no canto inferior direito para observar como o tamanho automático é tratado.
http://jsfiddle.net/9tqSn/11/ . Como consequência do tamanho dinâmico, o tamanho do bolo em si pode mudar dependendo de quais rótulos de dados estão presentes. Observe como isso muda conforme as fatias são mostradas e ocultas nesta demonstração.

Obrigado pela correção! +1 :)

Eu tenho um problema com esse recurso de dimensionamento automático em donuts. Funciona bem para tortas simples, mas quando usado em uma torta de 2 séries (ou seja, um donut), as tortas interna e externa são redimensionadas independentemente. Em particular, quando a torta interna não tem legendas de aranha e a torta externa as tem, a torta interna não é redimensionada e a torta externa é realmente redimensionada para caber na janela de visualização. Isso resulta em um gráfico distorcido (geralmente a pizza interna fica mais larga que a pizza externa, quebrando completamente a aparência e a semântica do gráfico).

Existe alguma chance de você estender essa correção para oferecer suporte a donuts também, como uma única grande torta?

Aqui está um exemplo: http://jsfiddle.net/mmarchetta/34VAT/2/

A torta que parece ser a externa (verde/azul) é na verdade a torta interna, e aquela com mais fatias que parece ser a interna é na verdade a externa.

Obrigado!

Eu tenho o mesmo problema com o gráfico de rosca, os rótulos estão se estendendo para fora do gráfico.

Este caso mostra como os rótulos são cortados: http://jsfiddle.net/highcharts/7okk430t/

Trabalhei nisso e explorei a lógica para adicionar reticências a rótulos de dados transbordantes. Atualmente, ele funciona bem em gráficos estáticos, mas falha ao redimensionar ou atualizar dinamicamente o gráfico.

Uma demonstração ao vivo pode ser vista em http://jsfiddle.net/highcharts/7okk430t/1/.

.. e aqui está a diferença:

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

Eu tentei o javascript daqui (http://jsfiddle.net/CjgLg/13/) e obtive o seguinte:

Erro de tipo não capturado: $(...).resizable não é uma função

O método resizable requer jQuery UI.

Ah... importei esses 2 (jquery-ui.css e jquery-ui.min.js) e funcionou bem agora, obrigado!

Eu também tenho rótulos de dados cortando.

+1 para a solução de reticências a ser implementada em gráficos altos.

Por que esta questão está encerrada? Foi iniciado em 2011, mas ainda tenho esse problema em 2017.

Isso ainda está acontecendo

Estou usando a versão 5.0.11
E ainda está acontecendo no gráfico de donuts.