2011-11-18 11 views
10

Tengo un gráfico circular con tantos sectores que es muy difícil de leer. ¿Es posible reducir el número de rebanadas, agrupando las más pequeñas en una sola llamada "otras" u ocultándolas?Highcharts: gráfico circular: reducir el número de sectores

+2

¿No podría simplemente no pasar tantos elementos a Highcharts? Como controlas el JSON que envías, puedes agregarlos tú mismo antes de enviarlos. – mynameiscoffey

+0

Relacionado: http://stackoverflow.com/questions/28883606/group-smaller-slices-in-pie-charts-to-improve-readability –

+0

Como OP, me encantaría que se construya este comportamiento: se especificaría el número máximo de divisiones para mostrar, el nombre de la "categoría de los demás", así como la columna y el orden de clasificación. Entonces Highchart podría agregar automáticamente todas las columnas restantes en la categoría de los demás, y un desglose con detalles cuando se haga clic. Además, al exportar, verá todas las categorías (sin agrupar allí). Hacer todo eso manualmente es un dolor. –

Respuesta

6

No. Este comportamiento no está integrado en Highcharts.

La manera más fácil de lograr esto es cambiando manualmente los datos que pasa al gráfico. Es decir, si hace la agrupación en una categoría 'Otros' antes de pasar los datos y renderizar el gráfico

0

Pegando información aquí como un puntero para las personas que deseen hacer lo anterior con javascript fuera de Highcharts, como yo yo mismo.

for(i=0; i<dataJSON.finished.length; i++) { 
    //console.info(i); 
    if(dataJSON.finished[i].name !== '_all_' && dataJSON.finished[i].name !== 'Anders')   { 
     tempValue=0; 
     for(j=0; j<dataJSON.finished[i].data.length; j++) { tempValue += dataJSON.finished[i].data[j]; } 
     if(tempValue/totalValue > 0.02) { 
     pieData.push({ name:dataJSON.finished[i].name, y:tempValue }); 
     } else andersValue += tempValue; 
    } 
    } 

    //console.info(pieData); 
    pieData.sort(function(a,b) {return (a.y > b.y) ? -1 : ((b.y > a.y) ? 1 : 0);}); 
    pieData.push({ name: "Overig", y: andersValue }); 
Cuestiones relacionadas