Chart.js 2.0使用货币和数千个分隔符格式化Y轴

我在格式化图表轴时遇到问题，我无法找到更新版本2.0的示例。

我如何（例如）2000000到€2.000.000？

我的小提琴： https ： //jsfiddle.net/Hiuxing/4sLxyfya/4/

window.onload = function() { var ctx = document.getElementById("canvas").getContext("2d"); window.myBar = new Chart(ctx, { type: 'bar', data: barChartData, options: { title: { display:true, text:"Figure" }, legend: { position: "bottom" }, tooltips: { mode: 'label', bodySpacing: 10, cornerRadius: 0, titleMarginBottom: 15 }, scales: { xAxes: [{ ticks: {} }], yAxes: [{ ticks: { beginAtZero: true, stepSize: 500000 } }] }, responsive: true } }); }; 

Answer 1

修复

在创建配置对象时将function分配给userCallback。 在创建刻度线时会调用此方法。 您可以在Scales Documentation底部的Chart.js找到文档

示例摆弄修复

 yAxes: [{ ticks: { beginAtZero: true, stepSize: 500000, // Return an empty string to draw the tick line but hide the tick label // Return `null` or `undefined` to hide the tick line entirely userCallback: function(value, index, values) { // Convert the number to a string and splite the string every 3 charaters from the end value = value.toString(); value = value.split(/(?=(?:...)*$)/); // Convert the array to a string and format the output value = value.join('.'); return '€' + value; } } }] 

Answer 2

对于使用版本：2.5.0的用户，这里有一个增强function。 有了这个，您还可以格式化图表工具提示中的金额，而不仅仅是’yAxes’中的’ticks’

 ... options: { scales: { yAxes: [{ ticks: { beginAtZero:true, callback: function(value, index, values) { return '$ ' + number_format(value); } } }] }, tooltips: { callbacks: { label: function(tooltipItem, chart){ var datasetLabel = chart.datasets[tooltipItem.datasetIndex].label || ''; return datasetLabel + ': $ ' + number_format(tooltipItem.yLabel, 2); } } } } 

这是我使用的number_format（）函数：

 function number_format(number, decimals, dec_point, thousands_sep) { // * example: number_format(1234.56, 2, ',', ' '); // * return: '1 234,56' number = (number + '').replace(',', '').replace(' ', ''); var n = !isFinite(+number) ? 0 : +number, prec = !isFinite(+decimals) ? 0 : Math.abs(decimals), sep = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep, dec = (typeof dec_point === 'undefined') ? '.' : dec_point, s = '', toFixedFix = function (n, prec) { var k = Math.pow(10, prec); return '' + Math.round(n * k) / k; }; // Fix for IE parseFloat(0.55).toFixed(0) = 0; s = (prec ? toFixedFix(n, prec) : '' + Math.round(n)).split('.'); if (s[0].length > 3) { s[0] = s[0].replace(/\B(?=(?:\d{3})+(?!\d))/g, sep); } if ((s[1] || '').length < prec) { s[1] = s[1] || ''; s[1] += new Array(prec - s[1].length + 1).join('0'); } return s.join(dec); }