reactjs 在重新记录中构造数据

6uxekuva 于 2023-01-08 发布在 React

关注(0)|答案(1)|浏览(131)

我有一些数据是嵌套的，看起来有点像这样：

let testData = [
    {
      animalType: 'Bird',
      data: [
        {
          animalName: 'Raven',
          animalLength: 120,
        },
        {
          animalName: 'Hawk',
          animalLength: 95,
        },
      ],
    },
    {
      animalType: 'Fish',
      data: [
        {
          animalName: 'Salmon',
          animalLength: 105,
        },
      ],
    },
    {
      animalType: 'Mammal',
      data: [
        {
          animalName: 'Dog',
          animalLength: 120,
        },
        {
          animalName: 'Cat',
          animalLength: 150,
        },
      ],
    },
  ];

我正尝试使用此数据创建Recharts条形图，但不起作用。下面是我需要的图表外观：

因此，每个条都应该是animalLength（和animalName），并且应该在X轴上按animalType分组。我已经尝试了这种方法的每一次迭代，但似乎双重嵌套数据不允许它工作。对于Recharts来说，这样的例子不多，所以我没有一个好主意。This one很接近，但X轴和Y轴的值来自同一个对象。
这是我目前正在使用的条形码。如有任何帮助，将不胜感激。

<BarChart
        width={1000}
        height={500}
        data={testData}
        margin={{ top: 40, right: 40, left: 0, bottom: 5 }}>
        <XAxis dataKey='animalType' />
        <YAxis dataKey='animalLength' />
        <CartesianGrid strokeDasharray='3 3' />
        {testData.forEach((agency) => {
          <Bar type='monotone' dataKey='animalName' />;
        })}
      </BarChart>

reactjs

来源：https://stackoverflow.com/questions/74953601/structuring-data-in-recharts

1条答案

按热度按时间

bnlyeluc1#

像这样的东西将做的工作，如果在每个动物类型你有1或2个动物名称...如果你有更多，你将需要调整

import { BarChart, Bar, Cell, XAxis, YAxis, ResponsiveContainer } from 'recharts'

let data = [
  {
    animalType: 'Bird',
    animal1Name: 'Raven',
    animal1Length: 120,
    animal1Color: 'red',
    animal2Name: 'Hawk',
    animal2Length: 95,
    animal2Color: 'red',
  },
  {
    animalType: 'Fish',
    animal1Name: 'Salmon',
    animal1Length: 105,
    animal1Color: 'blue',
  },

  {
    animalType: 'Mammal',
    animal1Name: 'Dog',
    animal1Length: 120,
    animal1Color: 'green',
    animal2Name: 'Cat',
    animal2Length: 150,
    animal2Color: 'green',
  },
]

const App = () => {
  const renderBar = ({ x, y, width, height, animal2Name, fill }) => {
    return (
      <rect
        fill={fill}
        width={width}
        height={height}
        x={animal2Name ? x : x + 60}
        y={y}
        className="recharts-rectangle"
      ></rect>
    )
  }
  return (
    <div style={{ width: '1000px', height: '300px' }}>
      <ResponsiveContainer width="100%" height="100%">
        <BarChart
          width={500}
          height={300}
          data={data}
          margin={{
            top: 20,
            right: 30,
            left: 20,
            bottom: 5,
          }}
        >
          <XAxis dataKey="animalType" />
          <YAxis />
          <Bar dataKey="animal1Length" shape={renderBar}>
            {data.map((entry, index) => (
              <Cell key={`cell-${index}`} fill={entry.animal1Color} />
            ))}
          </Bar>
          <Bar dataKey="animal2Length">
            {data.map((entry, index) => (
              <Cell key={`cell-${index}`} fill={entry.animal2Color} />
            ))}
          </Bar>
        </BarChart>
      </ResponsiveContainer>
    </div>
  )
}

export default App

赞(0）回复(0）举报 2023-01-08

我来回答

reactjs 在重新记录中构造数据

1条答案

相关问题

热门标签

最新问答