如何在Rechart中按12am-11:59pm全天时段绘制事件图表？

需要用Rechart绘制资金流入事件图表，要求X轴范围固定为当日00:00到23:59，按时间维度展示带时间戳的资金数据。目前实现的图表仅显示数据中存在的时间点，需要调整方法，同时希望了解其他能实现该需求的图表库。

数据示例：

const data = [
  {moneyIn: 100, time: '9:07 AM'},
  {moneyIn: 140, time: '9:07 AM'},
  {moneyIn: 250, time: '9:08 AM'}
]

当前图表代码：

<ResponsiveContainer width="99%" aspect={aspect}>
  <AreaChart
    width={730}
    height={300}
    data={data}
    style
    margin={{ top: 10, right: 0, left: 0, bottom: 0 }}
  >
    <defs>
      <linearGradient id="total" x1="0" y1="0" x2="0" y2="1">
        <stop offset="5%" stopColor={color} stopOpacity={0.8} />
        <stop offset="95%" stopColor={color} stopOpacity={0.3} />
      </linearGradient>
    </defs>
    <XAxis dataKey={time} stroke="gray" />
    <YAxis />
    <CartesianGrid strokeDasharray="3 3" className="chartGrid" />
    <Tooltip />
    <Area
      type="monotone"
      dataKey={moneyIn}
      stroke={color}
      fillOpacity={1}
      fill="url(#total)"
    />
  </AreaChart>
</ResponsiveContainer>

一、Rechart 调整方案 #

1. 标准化时间格式 #

Rechart的时间轴需要识别完整时间范围，先把数据中的字符串时间转换为当日的Date对象，同时合并同时间点的资金流入总和：

// 转换12小时制时间为当日Date对象
const convertTimeToDate = (timeStr) => {
  const [time, period] = timeStr.split(' ');
  let [hours, minutes] = time.split(':').map(Number);
  if (period === 'PM' && hours !== 12) hours += 12;
  if (period === 'AM' && hours === 12) hours = 0;
  const today = new Date();
  today.setHours(hours, minutes, 0, 0);
  return today;
};

// 聚合同时间点的资金数据
const processedData = Object.values(
  data.reduce((acc, item) => {
    const date = convertTimeToDate(item.time);
    const key = date.getTime();
    if (!acc[key]) {
      acc[key] = { moneyIn: 0, time: date };
    }
    acc[key].moneyIn += item.moneyIn;
    return acc;
  }, {})
);

2. 配置X轴覆盖全天范围 #

修改X轴类型为time，设置domain指定当日0点到23:59的范围，同时优化时间显示格式：

<XAxis
  dataKey="time"
  type="time"
  domain={[
    new Date(new Date().setHours(0, 0, 0, 0)),
    new Date(new Date().setHours(23, 59, 59, 999))
  ]}
  tickFormatter={(date) => {
    const hours = date.getHours();
    const period = hours >= 12 ? 'PM' : 'AM';
    const displayHour = hours % 12 || 12;
    return `${displayHour}:${date.getMinutes().toString().padStart(2, '0')} ${period}`;
  }}
  stroke="gray"
/>

3. 修正图表结构并适配数据 #

原代码中ResponsiveContainer闭合标签位置错误，修正后结合处理好的数据，AreaChart即可正常展示全时段范围：

<ResponsiveContainer width="99%" aspect={aspect}>
  <AreaChart
    data={processedData}
    margin={{ top: 10, right: 0, left: 0, bottom: 0 }}
  >
    <defs>
      <linearGradient id="total" x1="0" y1="0" x2="0" y2="1">
        <stop offset="5%" stopColor={color} stopOpacity={0.8} />
        <stop offset="95%" stopColor={color} stopOpacity={0.3} />
      </linearGradient>
    </defs>
    <XAxis
      dataKey="time"
      type="time"
      domain={[
        new Date(new Date().setHours(0, 0, 0, 0)),
        new Date(new Date().setHours(23, 59, 59, 999))
      ]}
      tickFormatter={(date) => {
        const hours = date.getHours();
        const period = hours >= 12 ? 'PM' : 'AM';
        const displayHour = hours % 12 || 12;
        return `${displayHour}:${date.getMinutes().toString().padStart(2, '0')} ${period}`;
      }}
      stroke="gray"
    />
    <YAxis />
    <CartesianGrid strokeDasharray="3 3" className="chartGrid" />
    <Tooltip formatter={(value) => [`$${value}`, '资金流入']} />
    <Area
      type="monotone"
      dataKey="moneyIn"
      stroke={color}
      fillOpacity={1}
      fill="url(#total)"
    />
  </AreaChart>
</ResponsiveContainer>

二、其他可选图表库 #

• Chart.js + react-chartjs-2：配置灵活，通过scales.x.min和scales.x.max直接设置全天时间范围，适合快速落地需求。
• ECharts for React：功能强大，时间轴支持精细配置，可自动补全时段空白，适合复杂资金数据的可视化场景。
• Victory：React生态的模块化图表组件，通过domain属性即可定义时间轴范围，组件化程度高，易于定制扩展。

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