如何在Chart.js+TypeScript中使用Ticks格式化器，实现无千分位且优化宽度？

当Chart.js使用en-US区域设置时，刻度数字的格式和宽度会自动优化，但如果直接用如下自定义tick回调：

ticks: {
  callback: function(value) {
    return value.toString();
  }
}

会丢失这种宽度优化效果。

官方文档提到可以调用默认格式化函数结合自定义逻辑，但Chart.Ticks.formatters.numeric在TypeScript中会报错“Property 'Ticks' does not exist on type 'typeof Chart'”；尝试Chart.registry.scales.get('ticks')?.formatters.numeric也无法访问到格式化器；而helpers.formatNumber需要手动指定区域设置，还会跳过Chart.js原生的数字宽度优化。

需求明确：仅保留小数点，去除千分位分隔符，且因刻度支持任意缩放，无法通过手动截断小数实现格式化。

解决方案 #

在tick回调中，利用当前Scale实例的默认格式化能力，同时修改结果去除千分位：

ticks: {
  callback: function(this: Chart.Scale, value: number, index: number, ticks: Tick[]) {
    // 调用当前刻度的默认numeric格式化函数
    const defaultFormatted = (this.options.ticks.formatters?.numeric as TickFormatter<number>).call(this, value, index, ticks);
    // 去除千分位分隔符
    return defaultFormatted.replace(/,/g, '');
  }
}

如果TypeScript仍提示类型缺失，可以扩展TickOptions类型以支持formatters：

declare module 'chart.js' {
  interface TickOptions {
    formatters?: {
      numeric: TickFormatter<number>;
    };
  }
}

原理说明 #

• 回调使用普通函数而非箭头函数，确保this指向当前Scale实例，能访问到实例的配置和默认格式化逻辑
• 先调用默认格式化函数保留宽度优化的计算逻辑，再对结果做字符串替换去除千分位，既满足格式需求，又不丢失原生的宽度优化

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