Chart.js柱状图数据添加千位分隔符与货币符号问题

嘿，我来帮你搞定这个问题！你已经成功加上了货币符号，现在只需要调整数值的格式化方式，就能轻松添上千位分隔符。这里有两种靠谱的方法，推荐用第一种原生API方案，省心又规范：

方法一：用原生Intl.NumberFormat（推荐） #

这个浏览器原生API能自动处理千位分隔符、货币符号，甚至不同地区的格式差异，兼容性也很好（除了极老的IE浏览器）。直接修改你现有的animation.onComplete回调即可：

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++) {
        var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model;
        // 核心：用Intl格式化数值，同时包含货币符号和千位分隔符
        var formattedValue = new Intl.NumberFormat('en-US', {
          style: 'currency',
          currency: 'USD', // 可替换成你需要的货币代码，比如'CNY'对应人民币
          minimumFractionDigits: 0 // 如果数据是整数，设为0去掉小数位；默认是2
        }).format(dataset.data[i]);
        // 把格式化后的文本绘制到柱子上方（可调整y值控制位置）
        ctx.fillText(formattedValue, model.x, model.y - 5);
      }
    });
  }
}

小调整说明： #

• 如果不需要货币符号，只想要千位分隔符，把配置改成这样：

  var formattedValue = new Intl.NumberFormat('en-US').format(dataset.data[i]);
  

• 想适配其他地区的格式（比如欧洲用逗号做千位分隔符），把第一个参数换成对应地区代码，比如'de-DE'。

方法二：自定义正则格式化（兼容老浏览器） #

如果你的项目要兼容IE10及以下这类老浏览器，可以自己写个简单的格式化函数：

// 自定义千位分隔符函数
function addThousandSeparators(num) {
  return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

// 在你的回调里使用
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++) {
        var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model;
        // 拼接货币符号和格式化后的数值
        var formattedValue = '$' + addThousandSeparators(dataset.data[i]);
        ctx.fillText(formattedValue, model.x, model.y - 5);
      }
    });
  }
}

这个正则会在每三个数字前自动插入逗号，实现千位分隔的效果。

内容的提问来源于stack exchange，提问作者Rayza