如何实例化generateLabels回调使图例项支持换行？

完全可行，不需要重写自定义HTML图例的全部逻辑，只需要结合两个关键配置就能实现：

• 开启图例标签的换行支持
• 在generateLabels中按需插入换行符

具体步骤如下：

1. 开启换行解析
   在图例配置中设置useLineBreaks: true，让Chart.js识别标签文本中的\n换行符，自动换行显示。

2. 自定义图例标签插入换行
   通过generateLabels函数，基于原生生成的图例项，根据你的分组规则在对应标签文本中插入\n，实现分组换行效果。

示例代码：

const chart = new Chart(document.getElementById('myChart'), {
  type: 'line',
  data: {
    labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
    datasets: [
      { label: '移动端 - 访问量', data: [120, 190, 300, 210, 250], borderColor: '#ff6384' },
      { label: '移动端 - 转化率', data: [20, 25, 35, 30, 40], borderColor: '#36a2eb' },
      { label: 'PC端 - 访问量', data: [220, 290, 350, 280, 320], borderColor: '#cc65fe' },
      { label: 'PC端 - 转化率', data: [15, 20, 28, 22, 30], borderColor: '#ffce56' }
    ]
  },
  options: {
    plugins: {
      legend: {
        labels: {
          // 开启换行支持
          useLineBreaks: true,
          // 可选：调整图例项间距，优化分组显示效果
          padding: 15,
          generateLabels: function(chart) {
            // 先获取原生生成的图例项数组
            const defaultLabels = Chart.defaults.plugins.legend.labels.generateLabels(chart);
            
            // 根据分组需求插入换行符：给PC端系列的第一个项标签前加换行
            return defaultLabels.map(item => {
              if (item.text.startsWith('PC端')) {
                return { ...item, text: `\n${item.text}` };
              }
              return item;
            });
          }
        }
      }
    }
  }
});

这段代码会把移动端的两个系列显示在第一行，PC端的两个系列显示在第二行，完全依赖原生图例插件实现，不需要额外编写自定义HTML和渲染逻辑。

如果需要更精细的分组（比如每组一个系列单独一行），只需要在每个图例项的标签末尾或开头插入\n即可。

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