Recharts - ReactJS - 为什么 X 轴重复

问题描述

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

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

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

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

代码

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

const data1 = [
  createData('1',0),createData('2',300,100,200),createData('3',600,100),createData('4',800,400,createData('5',1500,createData('6',2000,createData('7',2400,createData('8',createData('9',createData('10',createData('11',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”，

解决方法

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