Chart.js 如何实现多行标题显示？

嘿，我来帮你搞定这个问题！你之前尝试用'Chart.js\nLine Chart'或者'Chart.js<br>Line Chart'没效果，主要是因为Chart.js的标题默认不支持换行解析，得调整一下配置才行~

下面给你两种实用的实现方式：

方法一：开启换行支持+换行符分隔 #

只需要在标题配置里开启useLineBreaks，然后用\n来分隔多行文本就行，这是最简单的方式：

const myChart = new Chart(document.getElementById('myChart'), {
  type: 'line',
  data: {
    labels: ['Jan', 'Feb', 'Mar'],
    datasets: [{ data: [10, 20, 30] }]
  },
  options: {
    plugins: {
      title: {
        display: true,
        useLineBreaks: true, // 关键配置：允许换行
        text: 'Chart.js\nLine Chart' // 用\n分隔两行
      }
    }
  }
});

方法二：使用数组定义多行标题 #

如果你觉得用\n不够直观，也可以直接把text设为数组，每个元素对应一行，同样需要开启useLineBreaks：

title: {
  display: true,
  useLineBreaks: true,
  text: ['Chart.js', 'Line Chart'] // 数组元素分别对应两行
}

为啥之前的写法没用？ #

• 用<br>无效：因为Chart.js的标题是通过Canvas渲染的，不是HTML元素，所以不会解析HTML标签；
• 用\n无效：默认情况下useLineBreaks是false，Chart.js会忽略所有换行符，必须手动开启这个配置才会生效。

如果需要更个性化的多行标题样式（比如不同行用不同字体大小/颜色），还可以用title.callback函数自定义渲染逻辑，但上面两种方法足够应对大部分场景啦~

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