如何在Angular Chart.js中仅修改Label标题并保留提示框数据集数值

解决方案 #

你当前的写法存在两个问题：

1. 直接修改data.labels会覆盖原始标签值，导致非悬浮状态下无法正常显示截断后的短标签
2. 手动给label回调返回空字符串，把默认逻辑里显示数据集对应数值的功能屏蔽了

你可以拆分两个配置项分别实现需求，不需要修改原始标签值，也不需要覆盖label回调的默认逻辑：

1. 配置x轴刻度回调，实现非悬浮时标签只显示前10个字符加后缀
2. 配置tooltip标题回调，实现悬浮时显示完整标签内容

完整配置示例如下：

options: {
  scales: {
    x: {
      ticks: {
        callback: function(value) {
          const fullLabel = tooltipLabels[value];
          // 长度超过10则截断加两点，否则直接显示
          return fullLabel.length > 10 ? fullLabel.slice(0, 10) + '..' : fullLabel;
        }
      }
    }
  },
  plugins: {
    tooltip: {
      callbacks: {
        title: function(context) {
          // 取当前悬浮条目对应的完整标签作为tooltip标题
          return tooltipLabels[context[0].dataIndex];
        }
      }
    }
  }
}

修改后tooltip会沿用默认的label回调逻辑，自动显示各数据集的名称和对应数值，同时x轴非悬浮时显示截断后的短标签，符合你的预期效果。

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