此脚本使Chart.js将数据添加到图表中,以便它在栏本身上显示数据,但是我想添加千分隔符和货币符号。我已经可以使用货币符号,但是我不确定如何获得千分离器。
animation: {
onComplete: function () {
var ctx = this.chart.ctx;
ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontFamily, 'normal', Chart.defaults.global.defaultFontFamily);
ctx.fillStyle = "black";
ctx.textAlign = 'center';
ctx.textBaseline = 'bottom';
this.data.datasets.forEach(function (dataset)
{
for (var i = 0; i < dataset.data.length; i++) {
for(var key in dataset._meta)
{
var model = dataset._meta[key].data[i]._model;
ctx.fillText("$ " + dataset.data[i], model.x, model.y - 5);
}
}
});
}
}
有许多库(包括D3(可以帮助您格式化数字,但是浏览器还具有局部化的库,可以使用货币,甚至可以在IE11上使用。
const number = 2350972467;
console.log(number.toLocaleString());
console.log(number.toLocaleString(navigator.language, { style: 'currency', currency: 'USD' }));
尝试
var val = dataset.data[i].toString().replace(/B(?=(d{3})+(?!d))/g, ",");
ctx.fillText("$ " + val, model.x, model.y - 5)
好吧,我终于通过反复试验来解决它...这是我更改的...
var model = dataset._meta[key].data[i]._model;
var salestotal = dataset.data[i];
if(parseInt(salestotal) >= 1000){
salestotal2 = salestotal.toString().replace(/B(?=(d{3})+(?!d))/g, ",");
} else {
salestotal2 = salestotal;
}
ctx.fillText("$ " + salestotal2, model.x, model.y - 5);