我正在使用 Charts.js 在我的网站上显示图表。目前,标签显示为一长串数字(即 123456)。 我希望它显示为带有千位分隔符的货币:(即 $123,456)
我正在使用 scaleLabel 选项在值之前放置一个 $ USD 符号:
scaleLabel: "<%= ' $' + Number(value)%>"
和一个插入逗号分隔符的函数:
function(label){return label.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");}
我只是不知道如何一起使用这些来获得我想要的东西。
这是 fiddle :http://jsfiddle.net/vy0yhd6m/79/
(请记住,目前该图只有在您删除上面引用的那两个 JavaScript 片段之一的情况下才能工作)
感谢您提供的所有帮助。
最佳答案
我是 chart.js 的新手,但为了使 Billy Moon 的答案适用于最新版本 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;
}
}
}
}]
}
}
});
同样,标签格式化功能归功于 Billy Moon 的回答。
关于javascript - Charts.js 使用货币和千位分隔符格式化 Y 轴,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28523394/