2012-09-26 19 views
7

Mi gráfico es feo y no estoy seguro de qué hacer al respecto. Es feo porque las etiquetas se superponen y apenas se pueden leer. Ideas que ya he considerado:Tratar con la superposición de etiquetas de gráfico circular [Highcharts]

  • Ocultar etiquetas para rebanadas pequeñas. Esto tiene el negativo obvio de menos información visible, especialmente cuando se imprime la página. Nuestros usuarios imprimen mucho.
  • Alternar rebanadas grandes y pequeñas rodajas. No es ideal ya que reduce la organización de la información y puede sufrir ocasionalmente por el mismo problema.
  • Coloque manualmente cada etiqueta con posiciones fijas. Solución costosa con respecto al tiempo de implementación y mantenimiento del código.

¿Alguien tiene una idea mejor? Desearía que los Highcharts pudieran detectar superposiciones y hacer algo al respecto automáticamente. Aquí está la foto:

The label overlap on this chart is obviously an issue

Respuesta

6

me encontré con un Highcharts forum topic relacionada con la rotación del gráfico circular para distribuir mejor las etiquetas en este tipo de casos, sino que implica la modificación de la fuente para encontrar la línea siguiente y cambiar la referencia acumulada a cero:

cumulative = -0.25, // start at top 

Una opción que no es óptimo, pero podría funcionar es rotate los datos de las etiquetas de unos pocos grados para que no se superpongan, así:

{ 
    plotOptions : { 
     pie : { 
      dataLabels : { 
       rotation : 15 
      } 
     } 
    } 
} 
+0

Gracias por las ideas – AlexMA

8

Hay una nueva opción en Highcharts para establecer el inicio del gráfico circular. Puede usar el inicio angular para organizar todas las rebanadas pequeñas en el lado derecho del gráfico, permitiendo que quepan más etiquetas.

series: [{ 
    startAngle: 90 
}] 

jsFiddle demostración aquí: http://jsfiddle.net/highcharts/dK9CD/

+1

Esta sugerencia, sin duda tiene mérito. He comparado los gráficos con y sin la opción (y con más congestión) aquí: http://jsfiddle.net/dK9CD/40/ – AlexMA

+1

Prefiero esta solución que la aceptada. – whoan

Cuestiones relacionadas