etichette sovrapposte nel grafico a torta flot

Question

Uso il jquery flot per i grafici a torta e ho un problema con le etichette sovrapposte quando i pezzi del grafico a torta sono molto piccoli. C'è una buona soluzione per quello?

mio grafico a torta:

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 
      } 

Grazie, Arshavski Alexander.

Answer 1

Una soluzione di problemi di Google Code di Flot da Marshall Leggett (link) :

Ho trovato che sembra comune per le etichette di torta sovrapporre in piccoli grafici a torta rendendoli illeggibili, in particolare se diverse porzioni hanno valori di percentuale piccoli pari a . Questo è con il plugin jquery.flot.pie.
Si prega di vedere le immagini allegate. Ho lavorato su questo con l'aggiunta di una routine anti-collisione nel codice di rendering dell'etichetta. Sono allegando anche una copia del plugin revisionato. Vedi righe 472-501, in particolare le nuove funzioni getPositions() e comparePositions(). Questo è basato in parte sul codice di rilevamento collisione elemento DOM di Šime Vidas. Qualcosa di simile potrebbe essere una bella aggiunta alla libreria di torta .

lunga storia breve:

1. In jquery.flot.pie.js e dopo la linea che contiene:

   label.css('left', labelLeft);

aggiungere il seguente codice:

// 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. Aggiungere il seguente alla drawLabels() e si è fatto:

   var labels = [];

Answer 2

si potrebbe provare a nascondere alcune delle etichette sotto una certa percentuale:

pie: { 
    label: { 
     threshold: 0.1 
    } 
} 

vedi grafico/esempio 6 su http://people.iola.dk/olau/flot/examples/pie.html