在Recharts.js中设置日期的最小/最大日期

在Recharts.js中设置日期的最小/最大日期，您需要自定义X轴的domain属性

首先，请确保已安装并导入'recharts'库：

npm install recharts

接下来，导入所需的组件：

import React from 'react';
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts';

创建一个组件，并在其中设置X轴的最小/最大日期：

const data = [
  { name: '2021-01-01', value: 400 },
  { name: '2021-01-02', value: 300 },
  // ... 更多数据
];

const CustomDateRangeLineChart = () => {
  const minDate = new Date('2021-01-01');
  const maxDate = new Date('2021-01-31');

  return (
    <LineChart width={600} height={300} data={data}>
      <CartesianGrid strokeDasharray="3 3" />
      <XAxis
        dataKey="name"
        type="category"
        domain={[minDate.toISOString(), maxDate.toISOString()]}
        tickFormatter={(unixTime) => new Date(unixTime).toLocaleDateString()}
      />
      <YAxis />
      <Tooltip />
      <Legend />
      <Line type="monotone" dataKey="value" stroke="#8884d8" activeDot={{ r: 8 }} />
    </LineChart>
  );
};

export default CustomDateRangeLineChart;

在此示例中，我们设置了X轴的最小日期（minDate）和最大日期（maxDate）。然后，我们将它们转换为ISO字符串，并将其传递给domain属性。我们还自定义了X轴刻度标签的格式。