Chart.js注释Enter事件触发后标签框未自适应重绘问题

要解决标签框未随文本和方向变化自适应的问题，核心是在内容更新后强制触发标签元素的尺寸重新计算，以下是具体实现方案：

直接操作DOM元素调整尺寸 #

在鼠标悬浮切换文本和方向的逻辑中，添加尺寸重新计算的步骤：

// 获取你的注释标签DOM元素（根据实际选择器调整）
const labelEl = document.querySelector('.chartjs-annotation-label');

// 绑定鼠标悬浮事件（示例逻辑）
yourChartInstance.on('mousemove', (e) => {
  const activePoints = yourChartInstance.getElementsAtEventForMode(e, 'nearest', { intersect: true }, true);
  if (activePoints.length) {
    // 切换文本内容
    labelEl.textContent = '悬浮时显示的水平文本';
    // 切换为水平方向
    labelEl.style.transform = 'rotate(0deg)';
    
    // 关键：重新计算文本实际占用尺寸并赋值给标签框
    const contentRect = labelEl.getBoundingClientRect();
    labelEl.style.width = `${contentRect.width}px`;
    labelEl.style.height = `${contentRect.height}px`;
  }
});

结合Chart.js注释插件配置更新 #

如果使用的是官方chartjs-plugin-annotation插件，可通过更新注释配置并触发图表重绘来实现自适应：

// 鼠标悬浮时更新注释配置
yourChartInstance.on('mousemove', (e) => {
  const activePoints = yourChartInstance.getElementsAtEventForMode(e, 'nearest', { intersect: true }, true);
  if (activePoints.length) {
    // 修改注释的内容和方向相关配置
    yourChartInstance.options.annotations.yourLabelId = {
      ...yourChartInstance.options.annotations.yourLabelId,
      content: '悬浮时显示的水平文本',
      angle: 0, // 设置为水平方向
      width: 'auto', // 允许宽度自适应
      height: 'auto' // 允许高度自适应
    };
    
    // 触发图表重绘，让配置生效
    yourChartInstance.update();
  }
});

额外CSS优化 #

确保标签框的基础样式支持自适应：

.chartjs-annotation-label {
  white-space: nowrap; /* 水平文本不换行 */
  width: auto !important; /* 覆盖插件默认固定宽度 */
  height: auto !important; /* 覆盖插件默认固定高度 */
}

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