如何在Chart.js中实现多行坐标轴刻度标题？数组设置无效求助

架构老林

2026-5-12

解决Chart.js中scaleLabel多行显示的问题

Got it, I've run into this exact problem when working with long axis labels in Chart.js! The issue here is that the labelString property doesn't natively support arrays for line breaks—you need to use newline characters or a custom callback instead. Here are two reliable solutions:

方法1：使用换行符`\n`拼接字符串

直接把你的多行内容用\n连接成一个字符串，Chart.js会自动识别并换行：

scales: {
  xAxes: [{
    stacked: true,
    scaleLabel: {
      display: true,
      // 用\n把两行内容拼接起来
      labelString: `${firstCategory}: ${avg1}\n${secondCategory}: ${avg2}`,
      fontSize: 20,
      // 可选：调整标签对齐方式，默认居中，也可设为'left'/'right'
      // labelAlign: 'center'
    }
  }],
  yAxes: [{ stacked: true }]
}

方法2：使用`callback`函数动态生成多行标签

如果你的标签内容是动态生成的（比如从接口获取），用callback会更灵活，它允许你返回一个带换行的字符串：

scales: {
  xAxes: [{
    stacked: true,
    scaleLabel: {
      display: true,
      // 回调函数返回多行文本
      callback: function() {
        return `${firstCategory}: ${avg1}\n${secondCategory}: ${avg2}`;
      },
      fontSize: 20
    }
  }],
  yAxes: [{ stacked: true }]
}