作为刚接触Chart.js的新手，之前我一直拼凑各处收集来的代码片段，就为了搞定标签和工具提示的正确显示。现在把调试通过的可用脚本分享出来，帮大家快速实现几个实用的格式化效果：

• 为数值添加千位分隔符
• 给工具提示和坐标轴刻度加上货币符号
• 自定义设置X、Y轴的标签

注意：很多帖子只给代码但不说放置位置，我会在下面明确标注；另外这个脚本不全是我自己写的，是整合了各处的有效代码~

完整配置脚本 #

// 先定义格式化函数，方便复用
function formatNumberWithCommas(num) {
  return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
}

function formatCurrency(num) {
  return '$' + formatNumberWithCommas(num);
}

// Chart.js 配置示例
const chart = new Chart(document.getElementById('myChart'), {
  type: 'bar', // 可替换为你需要的图表类型，比如line、pie等
  data: {
    labels: ['一月', '二月', '三月', '四月', '五月'], // X轴默认标签
    datasets: [{
      label: '月度销售额',
      data: [12000, 19000, 30000, 50000, 25000],
      backgroundColor: 'rgba(54, 162, 235, 0.5)',
      borderColor: 'rgba(54, 162, 235, 1)',
      borderWidth: 1
    }]
  },
  options: {
    // 设置X、Y轴标签
    scales: {
      x: {
        title: {
          display: true,
          text: '月份', // 自定义X轴标题
          font: {
            size: 14,
            weight: 'bold'
          }
        }
      },
      y: {
        title: {
          display: true,
          text: '销售额', // 自定义Y轴标题
          font: {
            size: 14,
            weight: 'bold'
          }
        },
        ticks: {
          // 给Y轴刻度添加货币符号和千位分隔符
          callback: function(value) {
            return formatCurrency(value);
          }
        }
      }
    },
    // 设置工具提示的格式化
    plugins: {
      tooltip: {
        callbacks: {
          label: function(context) {
            let label = context.dataset.label || '';
            if (label) {
              label += ': ';
            }
            if (context.parsed.y !== null) {
              label += formatCurrency(context.parsed.y);
            }
            return label;
          }
        }
      }
    }
  }
});

代码位置说明 #

• 格式化函数(formatNumberWithCommas、formatCurrency)可以放在Chart实例创建之前，作为全局函数或者局部函数均可。
• 整个Chart配置要放在页面加载完成的回调里（比如DOMContentLoaded事件），或者放在<script>标签里且位置在图表DOM元素之后，确保能获取到myChart这个元素。

功能细节说明 #

• 千位分隔符：通过正则表达式实现的formatNumberWithCommas函数，能把普通数字转成带逗号分隔的格式，比如12000变成12,000。
• 货币符号：在千位分隔符基础上封装了formatCurrency函数，自动添加美元符号（如果需要其他货币，直接替换$为对应符号即可，比如¥）。
• 坐标轴标签：在scales.x.title和scales.y.title里设置display: true并填写text内容，就能显示自定义的轴标题；如果需要修改样式，还能通过font属性调整大小、粗细等。

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