Chart.js雷达图标签能否添加下划线？

Chart.js的雷达图刻度标签默认没有内置的下划线配置，但可以通过自定义插件手动实现这个效果，以下是具体实现方法：

方法：使用自定义afterDraw插件 #

通过Chart.js的插件机制，在图表绘制完成后，手动获取每个标签的位置和文本，利用Canvas API绘制下划线：

const radarChart = new Chart(document.getElementById('radar-chart'), {
  type: 'radar',
  data: {
    labels: ['性能', '续航', '价格', '外观', '易用性'],
    datasets: [{
      label: '产品A',
      data: [85, 70, 60, 90, 80],
      backgroundColor: 'rgba(255, 99, 132, 0.2)',
      borderColor: 'rgb(255, 99, 132)',
      pointBackgroundColor: 'rgb(255, 99, 132)',
      pointBorderColor: '#fff'
    }]
  },
  options: {
    scales: {
      r: {
        ticks: {
          // 先配置标签的基础样式
          font: {
            size: 14,
            family: 'Microsoft Yahei',
            weight: '500'
          },
          color: '#333'
        }
      }
    }
  },
  plugins: [{
    afterDraw: (chart) => {
      const radarScale = chart.scales.r;
      // 遍历每个刻度标签
      radarScale.ticks.forEach(tick => {
        const ctx = chart.ctx;
        // 同步标签的字体样式
        ctx.font = `${tick.font.weight || 'normal'} ${tick.font.size}px ${tick.font.family}`;
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        
        // 计算文本宽度，确定下划线的长度
        const textWidth = ctx.measureText(tick.label).width;
        // 设置下划线的位置（可根据需求调整偏移量）
        const underlineY = tick.y + tick.font.size / 2 + 3;
        
        // 绘制下划线
        ctx.beginPath();
        ctx.moveTo(tick.x - textWidth / 2, underlineY);
        ctx.lineTo(tick.x + textWidth / 2, underlineY);
        ctx.strokeStyle = tick.color; // 下划线颜色和标签保持一致
        ctx.lineWidth = 1; // 下划线粗细
        ctx.stroke();
      });
    }
  }]
});

自定义调整说明 #

• 下划线位置：修改underlineY里的偏移值（比如把3改成其他数字），可以控制下划线和标签文本的间距
• 下划线样式：调整lineWidth改变粗细，修改strokeStyle设置自定义颜色（比如#ff0000）
• 如果需要针对特定标签添加下划线，可在forEach里增加判断逻辑（比如if(tick.label === '性能')）

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