ChartJS 3.0如何实现坐标轴与提示框的数字格式化

你配置不生效的原因是ChartJS未提供ticks.format: "scientific"这类直接格式化参数，对数坐标轴的刻度格式化需要和提示框一样，通过自定义回调实现。

坐标轴刻度格式化配置 #

在对数刻度的ticks配置中新增callback字段，自定义数值渲染逻辑即可：

scales: {
  x: {
    ticks: {
      beginAtZero: true,
      display: true,
      autoSkip: true,
      maxTicksLimit: 11,
      maxRotation: 0
    }
  },
  Residuals: {
    type: 'logarithmic',
    title: {
      display: true,
      text: 'Residuals'
    },
    position: 'left',
    ticks: {
      beginAtZero: false,
      display: true,
      callback: function(value) {
        // 转为保留2位小数的科学计数法
        return Number.parseFloat(value).toExponential(2)
      }
    },
    max: 1.0,
    min: convergence / 10.0
  }
}

公共格式化逻辑复用 #

如果需要统一坐标轴和提示框的格式化规则，可以把逻辑抽为公共函数，避免重复编写：

// 公共科学计数法格式化函数，支持自定义保留小数位数
const formatSci = (num, decimals = 2) => Number.parseFloat(num).toExponential(decimals)

// 坐标轴回调直接调用
callback: (value) => formatSci(value)

// 提示框回调调用
plugins: {
  tooltip: {
    callbacks: {
      label: function(context) {
        return `${context.dataset.label}: ${formatSci(context.parsed.y)}`
      }
    }
  }
}

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