etiquetas superpuestas en el gráfico circular flot

Question

Uso jquery flot para mis gráficos circulares y tengo un problema con la superposición de etiquetas cuando las piezas del gráfico circular son muy pequeñas. ¿Hay una buena solución para eso?

Mi gráfico de sectores:

series: { 
       pie: { 
        show: true, 
        radius: 1, 
        label: { 
         show: true, 
         radius: 5/8, 
         formatter: function(label, series){ 
          return '<div style="font-size:12pt;text- align:center;padding:2px;color:black;margin-left:-80%;margin- top:-20%;">'+label+'<br/>'+Math.round(series.percent)+'%</div>'; 
         }, 
         background: { opacity: 0.5 } 
        } 
       } 
      }, 
      legend: { 
       show: false 
      } 

Gracias, Arshavski Alexander.

Answer 1

Una solución de problemas de código de Google de Flot por Marshall Leggett (link) :

He encontrado que parece común que las etiquetas se superpongan en más pequeños gráficos circulares que los hacen ilegibles, particularmente si varias rebanadas tienen valores de porcentaje pequeño. Esto es con el plugin jquery.flot.pie.
Por favor, vea las imágenes adjuntas. He solucionado esto con la adición de una rutina anticolisión en el código de representación de la etiqueta. Estoy adjuntando una copia del plugin revisado también. Consulte líneas 472-501, particularmente las nuevas funciones getPositions() y comparePositions(). Esto se basa en parte en el código de detección de colisiones del elemento DOM de Šime Vidas. Algo así podría ser una buena adición a la biblioteca circular .

larga historia:

1. En jquery.flot.pie.js y después la línea que contiene:

   label.css('left', labelLeft);

agregue el siguiente código:

// check to make sure that the label doesn't overlap one of the other labels 
var label_pos = getPositions(label); 
for(var j=0; j<labels.length; j++) 
{ 
var tmpPos = getPositions(labels[j]); 
var horizontalMatch = comparePositions(label_pos[0], tmpPos[0]); 
var verticalMatch = comparePositions(label_pos[1], tmpPos[1]);     
var match = horizontalMatch && verticalMatch;       
if(match) 
{ 
    var newTop = tmpPos[1][0] - (label.height() +1); 
    label.css('top', newTop); 
    labelTop = newTop; 
}  
} 

function getPositions(box) { 
     var $box = $(box); 
     var pos = $box.position(); 
     var width = $box.width(); 
     var height = $box.height(); 
     return [ [ pos.left, pos.left + width ], [ pos.top, pos.top + height ] ]; 
} 

function comparePositions(p1, p2) { 
     var x1 = p1[0] < p2[0] ? p1 : p2; 
     var x2 = p1[0] < p2[0] ? p2 : p1; 
     return x1[1] > x2[0] || x1[0] === x2[0] ? true : false; 
} 
labels.push(label); 

2. Agregue lo siguiente al drawLabels() y ya está:

   var labels = [];

Answer 2

podría intentar ocultar algunas de las etiquetas debajo de un determinado porcentaje:

pie: { 
    label: { 
     threshold: 0.1 
    } 
} 

ver gráfico/el ejemplo 6 en http://people.iola.dk/olau/flot/examples/pie.html