结果的千位分隔符

Question

此脚本使 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);
            }
        }
    });
}

}

Answer 1

有许多库（包括 d3）可以帮助您格式化数字，但浏览器也有本地化的 one 可以处理货币，甚至可以在 IE11 上运行。

const number = 2350972467;

console.log(number.toLocaleString());

console.log(number.toLocaleString(navigator.language, { style: 'currency', currency: 'USD' }));

Answer 2

尝试

var val = dataset.data[i].toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
ctx.fillText("$ " + val, model.x, model.y - 5)

Answer 3

好的，我终于通过反复试验解决了...这是我更改的内容...

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);

结果的千位分隔符

Thousand separator on result

javascript

chart.js2