Estoy usando Charts.js para mostrar un gráfico en mi sitio. Actualmente, la etiqueta se muestra como una larga cadena de números (es decir, 123456). Quiero que se muestre como moneda con separador de miles: (es decir, $ 123,456)
Estoy usando la opción scaleLabel para poner un símbolo de $ USD antes del valor:
scaleLabel: "<%= ' $' + Number(value)%>"y una función para insertar el separador de coma:
function(label){return label.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");}Simplemente no sé cómo usarlos juntos para obtener lo que quiero.
Aquí está el violín: http://jsfiddle.net/vy0yhd6m/79/
(Tenga en cuenta que actualmente el gráfico solo funcionará si elimina una de esas dos piezas de JavaScript citadas anteriormente)
Gracias por cualquier ayuda.
Soy nuevo en chart.js, pero esto es lo que tenía que hacer para que la respuesta de Billy Moon funcionara con la última versión 2.1.6.
var data = { labels: ["12 AM", "1 AM", "2 AM", "3 AM", "4 AM", "5 AM", "6 AM", "7 AM", "8 AM", "9 AM", "10 AM", "11 AM", "12 PM", "1 PM", "2 PM", "3 PM", "4 PM", "5 PM", "6 PM", "7 PM", "8 PM", "9 PM", "10 PM", "11 PM"], datasets: [ { label: "Sales $", lineTension: 0, backgroundColor: "rgba(143,199,232,0.2)", borderColor: "rgba(108,108,108,1)", borderWidth: 1, pointBackgroundColor: "#535353", data: [65, 59, 80, 81, 56, 55, 59, 80, 81, 56, 55, 40, 59, 80, 81, 56, 55, 40, 59, 80, 81, 56, 55, 40] } ] }; //var myChart = new Chart(document.getElementById('sales-summary-today'), { type: 'line', data: data, options: { animation: false, legend: {display: false}, maintainAspectRatio: false, responsive: true, responsiveAnimationDuration: 0, scales: { yAxes: [{ ticks: { beginAtZero: true, callback: function(value, index, values) { if(parseInt(value) >= 1000){ return '$' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); } else { return '$' + value; } } } }] } } });Una vez más, el mérito es de Billy Moon's Answer por la función de formateo de etiquetas.
Principalmente estoy resumiendo lo que otros han mencionado, pero creo que la solución más limpia para esta pregunta exacta (y frecuente) es utilizar el método toLocaleString con formato de moneda USD:
return value.toLocaleString("en-US",{style:"currency", currency:"USD"}); Esto funciona en todos los navegadores modernos. La documentación de Mozilla para toLocaleString enumera la compatibilidad y las opciones específicas del navegador para otras configuraciones regionales, monedas y tipos de formato (por ejemplo, porcentajes).
Nota Chart.js versión 2+ (lanzado en abril de 2016) requiere el uso del método de callback de llamada para el formato de marca avanzado:
var chartInstance = new Chart(ctx, { type: 'line', data: data, options: { scales: { yAxes: [{ ticks: { callback: function(value, index, values) { return value.toLocaleString("en-US",{style:"currency", currency:"USD"}); } } }] } } });La sintaxis si está utilizando Chart.js versión 1.X sería:
var myLineChart = new Chart(ctx).Line(data, options); var data = { ... } var options = { scaleLabel: function(label) { return value.toLocaleString("en-US",{style:"currency", currency:"USD"}); } Gracias a Perry Tew por hacer referencia al cambio de sintaxis y a mfink por la idea de usar toLocaleString .
Debería poder incluir el prefijo de moneda en la composición de la etiqueta dentro de la función...
var options = { animation: false, scaleLabel: function(label){return '$' + label.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");} };