Recharts面积图X轴设置domain后不显示0值/无数据刻度问题

配置不生效有三个核心问题：

• X轴没有显式声明type="number"，recharts默认会把未指定类型的X轴识别为类目轴（category），类目轴下domain配置不会生效，只会渲染传入数据里实际存在的time值，无法强制扩展到0-24的全范围。
• 传入的原始数据集本身不完整：一是存在大量重复time值的冗余数据（比如time=13、14、16、17、18都多次出现），二是缺失0-8、22-24时段的对应数据点。recharts没有内置自动补点逻辑，就算X轴范围设置正确，没有对应数据点的位置也不会自动渲染浓度为0的面积段，会直接连接相邻的现有数据点。
• 现有ticks={[25]}配置是错误的，这个属性会强制X轴只渲染传入的刻度值，也就是只显示25这一个刻度，和要展示0-24全时段的需求完全冲突。

第一步：预处理数据，补全0-24全时段点位 #

在传入图表前先处理原始数据，生成覆盖0-24所有小时的完整数据集，无用药记录的时段默认浓度设为0，重复time的点位合并取有效浓度值：

const rawData = outputTest.Dexamphetamine;
// 先生成0-24每小时的默认数据，浓度初始为0
const fullTimeData = Array.from({ length: 25 }, (_, hour) => ({
  substance: 'Dexamphetamine',
  dose: '20',
  time: hour,
  startdate: rawData[0].startdate,
  enddate: rawData[0].enddate,
  concentration: 0
}));
// 遍历原始数据，把实际测得的浓度值覆盖到对应时间点
rawData.forEach(item => {
  const timeIndex = item.time;
  // 优先保留非0的有效浓度值，避免重复0值覆盖有效数据
  if (item.concentration > 0 || fullTimeData[timeIndex].concentration === 0) {
    fullTimeData[timeIndex].concentration = item.concentration;
  }
});

第二步：修正图表配置 #

把预处理好的全时段数据传入图表，修正X轴的配置项：

<AreaChart
  width={500}
  height={100}
  data={fullTimeData}
  syncId="time"
  margin={{
    top: 10,
    right: 30,
    left: 0,
    bottom: 0,
  }}
>
  <CartesianGrid strokeDasharray="3 3" />
  <XAxis 
    dataKey="time" 
    type="number" // 核心配置：指定为数值轴，domain才会生效
    domain={[0, 24]} // 固定X轴范围为0-24
    ticks={Array.from({length: 25}, (_, i) => i)} // 按需配置要显示的刻度，这里是显示0-24每小时刻度，不需要可以删除该属性让轴自动生成刻度
  />
  <YAxis />
  <Tooltip />
  <Legend />
  <Area
    type="monotone"
    dataKey="concentration"
    stroke="#82ca9d"
    fill="#82ca9d"
  />
</AreaChart>

• 只要需要用domain强制设置轴范围，必须先明确对应轴的type，类目轴下的domain仅对数据中存在的类目值生效，无法扩展数据中不存在的范围。
• 不要期望图表组件自动补全无数据时段的数值，所有需要展示的点位（包括浓度为0的时段）都必须在传入图表的data数组中明确定义，才能正确渲染对应的面积段和刻度。
• 如果不需要显示0-24所有小时的刻度，可以删掉ticks属性，数值轴会根据设置的domain自动生成均匀间隔的刻度，也可以传入自定义的刻度数组比如[0,6,12,18,24]实现间隔6小时显示刻度的效果。

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