Antd 在 x 轴上绘制 2 条线，并且在同一个图表中具有不同的间隔值？

Question

是否可以在 Antd 中从 ('@ant-design/plots') 生成折线图，以在 X 轴上的两个不同时间间隔在同一张图中绘制 2 个系列？ 例如 每 1 分钟绘制一条系列线，每 15 分钟绘制另一条系列线。

例如模拟 json-

const graphData = [ { “时间”：“01:00”， “图表类型”：“15_分钟”， “总和”：71 }, { “时间”：“01:01”， "graphType": "1_min", “总天数”：70.15 }, { “时间”：“01:15”， "graphType":"15_min", “总天数”：39.29 }, { “时间”：“01:01”， "graphType": "1_min", “总天数”：33.28 }, ...

]； 代码：

const LineChart = (props) => {
  const config = {
    data: graphData,
    xField: 'time',
    yField: 'SumofDays',
    seriesField: 'graphType',
    xAxis: {
      tickCount: 48,
      label: {
        formatter: (v) => {
          const formattedTime = `${v}`.match(/[0-9]{2}:[0-9]{2}/g)
          return formattedTime[0];
        }
      }
    },
    series: {
      label: {
        formatter: (v) => `${v}`.replace(/\d{1,3}(?=(\d{3})+$)/g, (s) => `${s},`),
      }
    },
  
    width: 480,
    height:  325,
    color: ['#1979C9', '#D62A0D'],
  };
  return <Line {...config} />;


}

我想在单个 x 轴框架中看到 "graphType": "15_min" 和 "graphType": "1_min"。请帮忙。谢谢！

Answer 1

这是完全可能的，通过指定每个不同的 itickInterval，您可以执行类似以下操作：

  xAxis: {
  title: {
    text: 'x title',
  },
  line: {
    style: {
      //write your styles here
    },
  },
  min: 0,
  max: 100,
  nice: true,
  tickInterval: 25,
  range: [0.05, 0.95],
},
yAxis: {
  title: {
    text: 'y title',
  },
  line: {
    style: {
     
    },
  },
  min: 0,
  max: 100,
  nice: true,
  tickInterval: 33,
  range: [0.05, 0.95],
},