如何在Chart.js中用字符串类型标题实现自动换行避免挤压？

当Chart.js图表标题长度超过图表宽度时，标题会出现挤压变形（文字拥挤重叠，无法正常展示）。当前使用的配置代码如下：

plugins: {
  title: {
    display: true,
    text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. In rutrum leo ut tellus tempor, venenatis vulputate nisl sagittis. Morbi id fringilla purus. Etiam imperdiet ipsum.',
    color: 'navy',
    position: 'top',
    align: 'center',
    font: {
      weight: 'bold'
    },
    padding: 8,
  }
}

需求：实现标题自动换行，但必须保留title.text为字符串类型（不能使用字符串数组），最终效果为标题适配图表宽度自动拆分到多行完整显示。

方案1：使用Chart.js内置的自动换行配置（v3及以上版本适用） #

Chart.js v3及后续版本的标题插件原生支持自动换行功能，只需在标题配置中添加wordWrap: true即可，无需修改字符串格式：

plugins: {
  title: {
    display: true,
    text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. In rutrum leo ut tellus tempor, venenatis vulputate nisl sagittis. Morbi id fringilla purus. Etiam imperdiet ipsum.',
    color: 'navy',
    position: 'top',
    align: 'center',
    font: {
      weight: 'bold'
    },
    padding: 8,
    wordWrap: true, // 开启自动换行
    maxWidth: 600 // 可选：自定义每行最大宽度，不设置则默认适配图表容器宽度
  }
}

该方案会自动将字符串标题按图表宽度拆分到多行，完全符合text为字符串的要求。

方案2：自定义插件实现自动换行（兼容旧版本Chart.js） #

如果使用的是Chart.js v2或不支持wordWrap的旧版本，可以通过自定义插件重写标题绘制逻辑，实现字符串标题的自动换行：

// 注册自定义换行插件
Chart.register({
  id: 'customTitleWrap',
  beforeDraw: (chart) => {
    const titleOpts = chart.options.plugins.title;
    if (!titleOpts?.display) return;

    const ctx = chart.ctx;
    const titleText = titleOpts.text;
    const chartWidth = chart.width;
    const font = titleOpts.font;
    const align = titleOpts.align;
    const color = titleOpts.color;
    const padding = titleOpts.padding || 8;
    const fontSize = font.size || 16;

    // 设置字体样式
    ctx.font = `${font.weight || 'normal'} ${fontSize}px ${font.family || 'Arial'}`;
    ctx.fillStyle = color;
    ctx.textAlign = align;

    // 拆分字符串为适配宽度的多行
    const words = titleText.split(' ');
    let line = '';
    const lines = [];
    const maxLineWidth = chartWidth - 40; // 预留左右边距

    words.forEach(word => {
      const testLine = line + word + ' ';
      const testWidth = ctx.measureText(testLine).width;
      if (testWidth > maxLineWidth && line) {
        lines.push(line.trim());
        line = word + ' ';
      } else {
        line = testLine;
      }
    });
    lines.push(line.trim());

    // 隐藏原生标题，自定义绘制多行文本
    titleOpts.display = false;

    // 计算标题起始位置（模仿原生标题的顶部位置）
    let y = padding + fontSize;
    lines.forEach(line => {
      const x = align === 'center' ? chartWidth / 2 : align === 'left' ? padding : chartWidth - padding;
      ctx.fillText(line, x, y);
      y += fontSize + padding;
    });
  }
});

// 图表配置保持原text为字符串的格式
const chart = new Chart(document.getElementById('myChart'), {
  type: 'bar', // 示例图表类型
  data: {}, // 此处替换为你的图表数据
  options: {
    plugins: {
      title: {
        display: true,
        text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. In rutrum leo ut tellus tempor, venenatis vulputate nisl sagittis. Morbi id fringilla purus. Etiam imperdiet ipsum.',
        color: 'navy',
        position: 'top',
        align: 'center',
        font: {
          weight: 'bold'
        },
        padding: 8,
      }
    }
  }
});

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