React使用ApexCharts时x轴标签显示数字而非日期字符串问题求解

问题核心原因及解决方案 #

你遇到的x轴显示索引而非日期的问题由以下几个可修复的错误导致，按优先级调整即可：

1. 修复series数据与categories长度不匹配的问题

从你的打印结果可以看到：

• categories长度为6
• 第一个series的data长度仅有5，另外两个series的data为空
  ApexCharts当数据长度和分类长度不匹配时，会默认使用数组索引作为x轴标签。
  你当前生成分类的逻辑存在错误，原代码里的判断条件if (index > 0)完全没有实际作用，还导致分类收集逻辑出错，替换为如下逻辑即可正确生成等长的分类和series数据：

const getRideChoiceByClient = (r = triS) => {
    if (!r?.length) return {series: [], categories: []};
    // 先按日期去重/排序，保证所有日期都被收集
    const allDates = [...new Set(r.map(item => item.date))].sort();
    // 每个type按日期顺序生成对应的数据，缺的日期补0
    const generateSeriesData = (type: string) => {
        return allDates.map(date => {
            const item = r.find(i => i.date === date && i.type === type);
            return item ? item.ride_total : 0;
        })
    }
    return {
        series: [
            {name: "ABC", data: generateSeriesData('USER_APPLICATION')},
            {name: "DEF", data: generateSeriesData('CLIENT_APPLICATION')},
            {name: "HGI", data: generateSeriesData('ADMIN_MANUAL_ENTRY')}
        ],
        categories: allDates
    }
}

2. 明确指定x轴类型为分类轴，补充xaxis配置

你当前的customOptions没有配置x轴参数，需要补充配置强制指定x轴为分类类型，绑定你传入的categories：

<ChartWidget
  series={chartDat.series}
  xAxis={chartDat.categories}
  title="XYZ"
  height={410}
  type="line"
  customOptions={{
    colors: [COLORS[1], COLORS[0], COLORS[2]],
    // 新增x轴配置
    xaxis: {
      type: 'category',
      categories: chartDat.categories
    }
  }}
  extra={[]}
/>

3. 将chartDat存入React state触发重渲染

你当前的chartDat是普通JS变量，赋值后不会触发React组件重渲染，ChartWidget拿到的始终是初始化的空数组，自然无法显示正确分类。你需要把chartDat存入state，在数据更新时重新计算赋值：

// 新增state存储图表数据
const [chartDat, setChartDat] = useState({series: [], categories: []});

// 在tripSour更新时重新计算图表数据
useEffect(() => {
  if (tripSour?.entities?.length) {
    const data = getRideChoiceByClient(tripSour.entities);
    setChartDat(data);
  }
}, [tripSour])

调整完以上三点后，x轴即可正常显示日期标签。

内容的提问来源于stack exchange，提问作者Mohamed Sacko