React+react-chart-js中如何获取X轴标签文本值？

核心解决思路 #

在chart.js的X轴ticks.callback回调函数中，除了索引参数，还能拿到完整的标签数组，通过索引即可获取对应文本值，而非仅依赖索引。

具体实现代码（分类轴场景） #

假设你使用的是chart.js v3+（react-chartjs-2 v4+），示例如下：

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

// 必须注册分类刻度，否则分类轴无法正常工作
ChartJS.register(CategoryScale, LinearScale, BarElement, Tooltip, Legend);

const SalesChart = () => {
  // 定义X轴标签数组
  const xLabels = ['一月', '二月', '三月', '四月', '五月'];
  const chartData = {
    labels: xLabels,
    datasets: [
      {
        label: '月度销售额',
        data: [12000, 19000, 3000, 5000, 2000],
        backgroundColor: 'rgba(54, 162, 235, 0.2)',
        borderColor: 'rgba(54, 162, 235, 1)',
        borderWidth: 1,
      },
    ],
  };

  const chartOptions = {
    scales: {
      x: {
        ticks: {
          // 回调函数接收三个参数：当前值、索引、完整标签数组
          callback: function(_, index, values) {
            // 通过索引从标签数组中获取原始文本
            const originalLabel = values[index];
            // 这里进行自定义格式化，比如添加前缀
            return `【${originalLabel}】`;
          },
        },
      },
    },
  };

  return <Chart type="bar" data={chartData} options={chartOptions} />;
};

export default SalesChart;

不同轴类型的适配 #

时间轴场景 #

如果X轴是时间类型，需要注册TimeScale，并对时间值进行解析格式化：

import { TimeScale } from 'chart.js';
ChartJS.register(TimeScale);

// 标签为时间字符串/Date对象
const timeLabels = ['2023-01-01', '2023-02-01', '2023-03-01'];

const timeAxisOptions = {
  scales: {
    x: {
      type: 'time',
      ticks: {
        callback: function(timeValue) {
          // 将时间值格式化为自定义字符串
          return new Date(timeValue).toLocaleDateString('zh-CN', { 
            year: '2-digit', 
            month: 'short' 
          });
        },
      },
    },
  },
};

常见问题排查 #

• 确保已正确注册对应轴的刻度组件（如CategoryScale/TimeScale），否则无法正确获取标签数据。
• 若使用chart.js v2版本，X轴配置在scales.xAxes数组中，而非scales.x，回调函数的参数逻辑一致。

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