如何在Chart.js库的环形/饼图中为标签添加下划线

你尝试的两种方法无效的核心原因是：Chart.js的Tooltip默认不解析HTML内容，必须先开启HTML渲染模式，再通过HTML+CSS实现蓝色下划线效果。以下是针对不同Chart.js版本的可行方案：

针对Chart.js v3+版本（对应你方法一的配置结构） #

开启useHTML: true，并在label回调中返回带样式的HTML标签：

options: {
  plugins: {
    tooltip: {
      useHTML: true, // 关键：开启HTML解析能力
      callbacks: {
        label: function(context) {
          const label = context.label;
          // 用span标签实现蓝色下划线效果
          return `<span style="text-decoration: underline; color: blue;">${label}</span>`;
        }
      }
    }
  }
}

针对Chart.js v2版本（对应你方法二的配置结构） #

v2版本的Tooltip配置层级不同，同样需要开启useHTML: true：

options: {
  tooltips: {
    useHTML: true, // 开启HTML解析能力
    callbacks: {
      label: function(tooltipItem, data) {
        const label = data.labels[tooltipItem.index];
        return `<span style="text-decoration: underline; color: blue;">${label}</span>`;
      }
    }
  }
}

进阶：统一维护样式 #

如果需要多处复用该样式，可在页面CSS中定义类，避免重复编写内联样式：

.chart-tooltip-label {
  text-decoration: underline;
  color: blue;
}

然后在回调中直接使用类名：

// 以v3+版本为例
return `<span class="chart-tooltip-label">${label}</span>`;

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