Saltar al contenido

Cómo dar formato a Highcharts dataLabels Decimal Points

Solución:

Necesitas combinar el dataLabels formatter 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 sencilla de hacerlo sin tener que definir una función mediante el formateador.

extra:

La coma después de los dos puntos asegura que un número como 1450.33333 se muestre como 1.450,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 Y debido a varias unidades), puede proporcionarlo 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 francesa de billar) mios: significa “millones” (traducción francesa de millones)

¡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 *