Chart.js: formateo del eje Y

Respuestas:

163

Tuve el mismo problema, creo que en Chart.js 2.xx el enfoque es ligeramente diferente como a continuación.

ticks: {
    callback: function(label, index, labels) {
        return label/1000+'k';
    }
}

Más en detalles

var options = {
    scales: {
        yAxes: [
            {
                ticks: {
                    callback: function(label, index, labels) {
                        return label/1000+'k';
                    }
                },
                scaleLabel: {
                    display: true,
                    labelString: '1k = 1000'
                }
            }
        ]
    }
}
Jaison
fuente
3
es bueno saber que.
Jaison
4
Esta también parece ser la forma correcta de hacerlo con angular-chart.js
user1576978
3
esta respuesta debe ser aceptada. Creo que esto funcionará en nuevas versiones probablemente en 2.xx y superiores. Tengo una nueva versión y probé muchas otras soluciones que se encuentran en la web, pero nada funcionó. esto es lo único que funcionó para mí ..
Justin
2
Esto funciona bien. Esto debería aceptarse como la respuesta. Me tomó una hora encontrar esto. Por qué esto no está en la documentación, se me escapa. ¿Cómo encontraste esto, Jaison?
Jay
2
Gracias por esta respuesta, me ayudó mucho con mi proyecto.
mikey242
56

Una característica no documentada de la biblioteca ChartJS es que si pasa una función en lugar de una cadena, usará su función para representar el scaleLabel del eje y.

Entonces, mientras "<%= Number(value).toFixed(2).replace('.',',') + ' $' %>"funciona, también puedes hacer:

scaleLabel: function (valuePayload) {
    return Number(valuePayload.value).toFixed(2).replace('.',',') + '$';
}

Si estás haciendo algo remotamente complicado, te recomiendo que lo hagas.

jacobangel
fuente
Esa es la mejor respuesta aquí. Debido a un simple IF, la función se llama directamente en lugar de ejecutar el analizador de plantilla incrustado que llama al código JS indirectamente.
schlingel
5

Como dijo Nevercom, scaleLable debería contener javascript, por lo que para manipular el valor y, simplemente aplique el formato requerido.

Tenga en cuenta que el valor es una cadena.

var options = {      
    scaleLabel : "<%= value + ' + two = ' + (Number(value) + 2)   %>"
};

ejemplo de jsFiddle

si desea establecer una escala manual y puede usar scaleOverride

var options = {      
    scaleLabel : "<%= value + ' + two = ' + (Number(value) + 2)   %>",

    scaleOverride: true,
    scaleSteps: 10,
    scaleStepWidth: 10,
    scaleStartValue: 0

};

ejemplo de jsFiddle

Stuart
fuente
1
muy claro, estaba confundido sobre cómo usar scaleLabel con valores personalizados Gracias +1
MasoodRehman
5

Chart.js 2.XX

Sé que esta publicación es antigua. Pero si alguien está buscando una solución más flexible, aquí está

var options = {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true,
                    callback: function(label, index, labels) {
                        return Intl.NumberFormat().format(label);
                        // 1,350

                        return Intl.NumberFormat('hi', { 
                            style: 'currency', currency: 'INR', minimumFractionDigits: 0, 
                        }).format(label).replace(/^(\D+)/, '$1 ');
                        // ₹ 1,350

                        // return Intl.NumberFormat('hi', {
                            style: 'currency', currency: 'INR', currencyDisplay: 'symbol', minimumFractionDigits: 2 
                        }).format(label).replace(/^(\D+)/, '$1 ');
                        // ₹ 1,350.00
                    }
                }
            }]
        }
    }

'hola' es hindi. Verifique aquí el argumento de otras configuraciones regionales
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#Locale_identification_and_negotiation#locales_argument

para obtener más símbolos de moneda
https://www.currency-iso.org/en/home/tables/table-a1.html

Diestro
fuente
¡Funcionó a las mil maravillas! ty!
Mohammed A. Fadil
2

aquí puede encontrar un buen ejemplo de cómo formatear el valor del eje Y.

Además, puede usar lo scaleLabel : "<%=value%>"que mencionó, básicamente significa que todo entre las etiquetas <%=y %>se tratará como código javascript (es decir, puede usar ifdeclaraciones ...)

Nevercom
fuente