如何用@ant-design/plots实现同轴双时间间隔折线图？

完全可以实现这个需求，核心是将时间字符串转换为可排序的时间类型，让图表能正确识别时间顺序，从而让不同间隔的系列在同一X轴上对齐显示。

关键问题分析 #

原代码中X轴使用的是字符串格式的time，图表会按字符串字典序排序，无法自动识别时间逻辑，导致不同间隔的系列点可能无法正确映射到时间轴上，最终显示效果不符合预期。

解决方案步骤 #

1. 预处理数据：转换时间格式
   把每个数据项的time字符串转换为Date对象（假设所有数据属于同一天，统一用当前日期的时间部分），让图表能按时间顺序正确排序。
2. 配置X轴为时间类型
   在xAxis中设置type: 'time'，让图表识别时间字段，自动处理刻度生成和时间间隔适配。
3. 优化时间显示格式
   通过xAxis.label.formatter将时间格式化为HH:mm形式，保证显示友好性。

修改后的完整代码 #

import { Line } from '@ant-design/plots';

// 模拟数据
const graphData = [
  { "time": "01:00", "graphType": "15_min", "SumofDays": 71 },
  { "time": "01:01", "graphType": "1_min", "SumofDays": 70.15 },
  { "time": "01:15", "graphType":"15_min", "SumofDays": 39.29 },
  { "time": "01:02", "graphType": "1_min", "SumofDays": 33.28 },
  // 更多数据...
];

// 预处理数据：将time转换为Date对象
const processedData = graphData.map(item => {
  const [hours, minutes] = item.time.split(':');
  // 可替换为固定日期，比如 new Date('2024-01-01T${item.time}:00')
  const date = new Date();
  date.setHours(Number(hours), Number(minutes), 0, 0);
  return {
    ...item,
    time: date,
  };
});

const LineChart = (props) => {
  const config = {
    data: processedData,
    xField: 'time',
    yField: 'SumofDays',
    seriesField: 'graphType',
    xAxis: {
      type: 'time', // 设置为时间类型
      tickCount: 48,
      label: {
        formatter: (v) => {
          const hours = v.getHours().toString().padStart(2, '0');
          const minutes = v.getMinutes().toString().padStart(2, '0');
          return `${hours}:${minutes}`;
        },
      },
    },
    series: {
      label: {
        formatter: (v) => `${v}`.replace(/\d{1,3}(?=(\d{3})+$)/g, (s) => `${s},`),
      },
    },
    width: 480,
    height: 325,
    color: ['#1979C9', '#D62A0D'],
  };
  return <Line {...config} />;
};

export default LineChart;

额外注意事项 #

• 如果原始数据中存在相同时间+相同graphType的重复数据，建议先做聚合处理（取平均值、求和或保留最新值），避免折线图出现异常重叠点。
• 若需自定义X轴刻度间隔，可在xAxis中添加tickInterval配置，比如tickInterval: 3600000表示每小时一个刻度（单位为毫秒）。

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