如何在Chart.js及ReactJS中为X轴标签（Labels）添加下划线

一、原生Chart.js 实现方法 #

方法1：自定义Canvas绘制插件（推荐） #

Chart.js默认用Canvas渲染文本，无法直接使用HTML标签，所以可以通过自定义插件，在图表绘制完成后手动为X轴标签绘制下划线：

const myChart = new Chart(document.getElementById('myChart'), {
  type: 'bar',
  data: {
    labels: ['标签A', '标签B', '标签C'],
    datasets: [{
      label: '示例数据',
      data: [12, 19, 3]
    }]
  },
  options: {
    scales: {
      x: {
        ticks: {
          padding: 10 // 给下划线预留空间，避免和标签重叠
        }
      }
    }
  },
  plugins: [{
    afterDraw: (chart) => {
      const ctx = chart.ctx;
      const xAxis = chart.scales.x;

      xAxis.ticks.forEach(tick => {
        // 获取标签的位置和文本宽度
        const textWidth = ctx.measureText(tick.label).width;
        const centerX = tick.x;
        const underlineY = tick.y + 3; // 下划线的垂直位置，可按需调整

        // 绘制下划线
        ctx.beginPath();
        ctx.moveTo(centerX - textWidth / 2, underlineY);
        ctx.lineTo(centerX + textWidth / 2, underlineY);
        ctx.strokeStyle = '#000'; // 下划线颜色
        ctx.lineWidth = 1; // 下划线粗细
        ctx.stroke();
      });
    }
  }]
});

方法2：HTML渲染模式（仅Chart.js 3+支持） #

如果你的图表场景允许使用HTML渲染标签，可以开启ticks.render: 'html'，并在回调中返回带<u>标签的内容：

const myChart = new Chart(document.getElementById('myChart'), {
  type: 'bar',
  data: {
    labels: ['标签A', '标签B', '标签C'],
    datasets: [{
      label: '示例数据',
      data: [12, 19, 3]
    }]
  },
  options: {
    scales: {
      x: {
        ticks: {
          render: 'html',
          callback: (value) => `<u>${value}</u>`
        }
      }
    }
  }
});

注意：这种方法兼容性不如插件方案，部分图表类型可能不支持，需按需使用。

二、ReactJS（react-chartjs-2）实现方法 #

方法1：自定义插件（推荐） #

和原生Chart.js逻辑一致，将插件作为配置项传入react-chartjs-2的组件中：

import React from 'react';
import { Chart as ChartJS, CategoryScale, LinearScale, BarElement, Tooltip, Legend } from 'chart.js';
import { Bar } from 'react-chartjs-2';

// 注册Chart.js所需的组件
ChartJS.register(CategoryScale, LinearScale, BarElement, Tooltip, Legend);

// 自定义下划线插件
const XAxisUnderlinePlugin = {
  afterDraw: (chart) => {
    const ctx = chart.ctx;
    const xAxis = chart.scales.x;

    xAxis.ticks.forEach(tick => {
      const textWidth = ctx.measureText(tick.label).width;
      const centerX = tick.x;
      const underlineY = tick.y + 3;

      ctx.beginPath();
      ctx.moveTo(centerX - textWidth / 2, underlineY);
      ctx.lineTo(centerX + textWidth / 2, underlineY);
      ctx.strokeStyle = '#000';
      ctx.lineWidth = 1;
      ctx.stroke();
    });
  }
};

export default function ReactBarChart() {
  const chartData = {
    labels: ['React标签1', 'React标签2', 'React标签3'],
    datasets: [{
      label: '示例数据',
      data: [22, 15, 28],
      backgroundColor: 'rgba(54, 162, 235, 0.6)'
    }]
  };

  const chartOptions = {
    scales: {
      x: {
        ticks: {
          padding: 10
        }
      }
    }
  };

  return (
    <Bar 
      data={chartData} 
      options={chartOptions} 
      plugins={[XAxisUnderlinePlugin]} 
    />
  );
}

方法2：HTML渲染模式 #

在react-chartjs-2的配置中开启HTML渲染，返回带下划线的标签：

import React from 'react';
import { Chart as ChartJS, CategoryScale, LinearScale, BarElement, Tooltip, Legend } from 'chart.js';
import { Bar } from 'react-chartjs-2';

ChartJS.register(CategoryScale, LinearScale, BarElement, Tooltip, Legend);

export default function ReactBarChart() {
  const chartData = {
    labels: ['React标签1', 'React标签2', 'React标签3'],
    datasets: [{
      label: '示例数据',
      data: [22, 15, 28],
      backgroundColor: 'rgba(54, 162, 235, 0.6)'
    }]
  };

  const chartOptions = {
    scales: {
      x: {
        ticks: {
          render: 'html',
          callback: (value) => `<u>${value}</u>`
        }
      }
    }
  };

  return <Bar data={chartData} options={chartOptions} />;
}

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