繁体   English   中英

在 Recharts 中构建数据

[英]Structuring data in Recharts

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

  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 没有很多这样的例子,所以我想不出一个好主意。 这个很接近,但 X 轴和 Y 轴的值来自同一个 object。

这是我目前使用的 BarChart 代码。 任何帮助将非常感激。

 <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>

如果在每种动物类型中你有 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

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM