Saltar al contenido

Cómo dar formato a los puntos decimales de las etiquetas de datos de Highcharts

Esta cuestión se puede tratar de variadas formas, pero te enseñamos la que para nosotros es la solución más completa.

Solución:

Necesitas combinar el dataLabels formateador y Highcharts.numberFormat:

...
dataLabels: 
    enabled: true,
    formatter: function () 
        return Highcharts.numberFormat(this.y,2);
    

...

Ver jsFiddle

Simplemente agregaría una opción de formato a las etiquetas de datos de la siguiente manera:

dataLabels: 
    enabled: true,
    format: 'point.y:,.2f'

Es la forma más sencilla de hacerlo sin tener que definir una función usando el formateador.

extra:

La coma después de los dos puntos asegura que un número como 1450,33333 se muestre como 1450,33, lo cual también es bueno.

En caso de que alguien quiera ir “más allá”, estoy mostrando datos que pueden ser de 10 ^ 1 a 10 ^ 9, así que los estoy convirtiendo y mostrando la unidad después.

Recuerde, Highcarts solo trata con números enteros, por lo que si desea agregar unidades (y no en el eje YA debido a que hay varias unidades), puede ingresarlos en los datos de origen, pero debe formatearlos después:

column: {
            dataLabels: {
                enabled: true,
                formatter: function () 
                    // Display only values greater than 0.
                    // In other words, the 0 will never be displayed.
                    if (this.y > 0) 
                        if (this.y >= Math.pow(10, 9))
                        
                            return Highcharts.numberFormat(this.y /Math.pow(10, 9) , 1) + " mias";
                        
                        else if (this.y >= Math.pow(10, 6))
                        
                            return Highcharts.numberFormat(this.y /Math.pow(10, 6) , 1) + " mios";
                        
                        else
                        
                            return Highcharts.numberFormat(this.y, 0);
                        
                    
                ,

mias: significa “milliards” (traducción al francés de billar) mios: significa “millones” (traducción al francés de millones)

Si aceptas, tienes la libertad de dejar una noticia acerca de qué te ha impresionado de este enunciado.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)


Tags : /

Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *