Recharts - ReactJS - 为什么 X 轴重复

Question

我正在尝试显示一年中每个月的图表。

添加了我的数据，但不知怎的，X 轴做了 3 次

任何想法如何纠正它？我做错了什么？

下面我有最小的数据和图表复制案例。

代码

// Generate  Data
function createData(time, amount1, amount2, amount3) {
  return { time, amount1, amount2, amount3 };
}

const data1 = [
  createData('1', 0, 0, 0),
  createData('2', 300, 100, 200),
  createData('3', 600, 100, 100),
  createData('4', 800, 400, 200),
  createData('5', 1500, 100, 100),
  createData('6', 2000, 100, 100),
  createData('7', 2400, 100, 100),
  createData('8', 2400, 100, 100),
  createData('9', 2400, 100, 100),
  createData('10', 2400, 100, 100),
  createData('11', 2400, 100, 100),
  createData('12', undefined),
];




export default function Chart() {
  const theme = useTheme();

  return (
    <React.Fragment>
      <Title>Year</Title>
      <ResponsiveContainer>

        <LineChart data={data1} width={600} height={300}
          margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
          <XAxis dataKey="time" stroke={theme.palette.text.secondary} />
          <YAxis stroke={theme.palette.text.secondary}>
            <Label
              angle={270}
              position="left"
              style={{
                textAnchor: 'middle',
                fill: theme.palette.text.primary,
              }}
            >
              Requests
            </Label>
          </YAxis>
          <Tooltip />
          <Legend />
          <Line
            data={data1}
            type="monotone"
            dataKey="amount1"
            stroke={theme.palette.primary.main}


          />



          <Line
            data={data1}
            type="monotone"
            dataKey="amount2"
            stroke={theme.palette.primary.main}


          />

          <Line
            data={data1}
            type="monotone"
            dataKey="amount3"
            stroke={theme.palette.primary.main}


          />
        </LineChart>

      </ResponsiveContainer>
    </React.Fragment>
  );
}

为什么 X 轴上的月份重复？我为每个月设定价值

做了一些研究，但找不到任何关于此的内容。

使用最新的 "recharts" - "recharts": "^2.0.3",

Answer 1

您应该删除每个 Line 组件中的 data={data1} 属性，这应该可以解决问题。