2012-05-26 23 views
12

Estoy implementando Highcharts en mi sitio, sin embargo, resulta desafiante desde el punto de vista de la presentación.Highcharts eliminan las etiquetas de valor cero

Mis datos se cargan bien, pero para la serie, algunos de los valores son ceros. Me gustaría mostrar la etiqueta cuando no sea cero, ya que de lo contrario se vuelve difícil de leer.

que estoy tratando de hacer algo como esto:

plotOptions: { 
    column: { 
    stacking: 'normal', 
    dataLabels: { 
      enabled: this.value == 0 ? false : true, 
     color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white' } 
} 
} 

Pero esto no está funcionando. Intenté usar solo 'esto' en lugar de valor, pero tampoco lo hago. No he podido encontrar una opción predeterminada de la biblioteca que me permita hacer esto sin tener que crear código personalizado.

He comprobado algunos enfoques, pero los ceros están en una de las series. Así que todavía quiero presentar la etiqueta de los valores que no son ceros para el grupo.

Creo que cuando uno dice this.y que toma el valor de todo el grupo, y no las series individuales ...

¿Alguna sugerencia? ¡Claramente estoy haciendo algo mal!

Respuesta

52

¿Ha intentado utilizar la opción formatter para dataLabels? Debería poder acceder a sus datos dentro de eso y decidir cómo debería ser la etiqueta. Aquí puede verificar cero y simplemente devolver null que se muestra a continuación.

dataLabels: { 
    enabled: true, 
    color: colors[0], 
    style: { 
     fontWeight: 'bold' 
    }, 
    formatter: function() { 
     if (this.y != 0) { 
      return this.y +'%'; 
     } else { 
      return null; 
     } 
    } 
} 

Además, si usted está teniendo problemas para averiguar qué parte de sus datos a la vista, utilizar console.log(this) en la función formateador para que pueda ver el objeto que se está trabajando.

Salida jsFiddle este ejemplo de trabajo: http://jsfiddle.net/VLmKK/69/

Espero que ayude!

Actualización: devuelve nulo en lugar de cadena vacía para evitar la creación de una etiqueta invisible como se menciona en los comentarios de Brett. Gracias.

También puede not return anything en valores cero.

+0

gracias gizmotivation, he editado la pregunta para aclarar. – Lievcin

+0

@Lievcin: la opción de formateador maneja cada valor individualmente tal como lo desea. Lo probé en los archivos de muestra de Highchart. Solo eliminó las etiquetas de los puntos de datos que tenían 0. ¿Pudo probarlo? – christurnerio

+0

Acabo de agregar un ejemplo jsfiddle para usted. http://jsfiddle.net/gizmovation/VLmKK/ – christurnerio

Cuestiones relacionadas