图表.js 2.0 使用货币和千位分隔符格式化 Y 轴
Chart.js 2.0 Formatting Y Axis with Currency and Thousands Separator
我在格式化图表轴时遇到问题,并且无法找到更新版本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
}
});
};
修复
在创建配置对象时将函数分配给用户回调。创建刻度线时会调用此值。您可以在图表中找到文档.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;
}
}
}]
对于那些使用版本:2.5.0 的用户,这里有一个增强功能。有了这个,您还可以在图表的工具提示中格式化金额,而不仅仅是"yAxes"中的"即时报价"
...
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);
}
相反,您可以使用本机JavaScript的新函数 NumberFormat
yAxes: [{
ticks: {
beginAtZero: true,
callback: function(value, index, values) {
return '€ ' + Intl.NumberFormat().format((value/1000)) + 'K';
}
}
}]
//2000000 => € 2,000K
相关文章:
- 图表.js 2.0 使用货币和千位分隔符格式化 Y 轴
- 千位分隔符的正则表达式
- 如何将带有逗号千位分隔符的字符串解析为数字
- 图表.js使用货币和千位分隔符设置Y轴的格式
- 使用美元符号和千位分隔符格式化引导表
- 显示带有千位分隔符的数字
- 高图 y 轴千位分隔符
- 带千位分隔符的计数器
- 在 Javascript 函数 (ASP.net) 上使用句点的千位分隔符
- 增强千位分隔符的正则表达式
- 向 jQuery 计数器添加千位分隔符
- 如何在我的html表单中添加千位分隔符
- 千位分隔符使用空白
- 用撇号作为千位分隔符格式化数字
- d3.在变量上格式化千位分隔符
- Regex表示带小数和千位分隔符的数字
- Javascript函数比较两个千位分隔符数字不工作
- javascript中整数的千位分隔符
- 正则表达式,用于不处理点后面的数字的正向前看千位分隔符
- 如何用千位分隔符解析两个空格分隔的数字