如何将属性数组映射到重新图表中具有该属性的条形图？

Question

我想在 react(recharts) 中有一个图表组件，当我使用 map 函数将我的属性数组映射到带有该道具的条形图时，问题是它没有在我的图表中显示条形图！这是我的代码：

export const HorizontalBarChart = (props: {
  data: Array<any>,
  properties: Array<any>,
}) => {
  const barItems = props.properties.map((obj) => {
    <Bar dataKey={obj.key}
      fill={obj.color}
      radius={[0, 10, 10, 0]}
    >
    </Bar>
  });

  return (
    <BarChart
      width={450}
      height={250}
      data={props.data}
      layout="vertical"
      margin={{
        top: 5, right: 30, left: 20, bottom: 5,
      }}
    >
      {barItems}
      <CartesianGrid horizontal={false} />
      <XAxis
        type="number"
        reversed={true}
        domain={[0, MAX]}
      //hide={true}
      />
      <YAxis type="category"
        dataKey="name"
        orientation="right"
        hide={true}
      />
    </BarChart>
  );
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

但是当我手动实现条形标签时它起作用了！像这样：

export const HorizontalBarChart = (props: {
  data: Array<any>,
  properties: Array<any>,
}) => {

  return (
    <BarChart
      width={450}
      height={250}
      data={props.data}
      layout="vertical"
      margin={{
        top: 5, right: 30, left: 20, bottom: 5,
      }}
    >
      <Bar dataKey={props.properties[1].key}
        fill={props.properties[1].color}
        radius={[0, 10, 10, 0]}
      >
      </Bar>
      <Bar dataKey={props.properties[2].key}
        fill={props.properties[2].color}
        radius={[0, 10, 10, 0]}
      >
      </Bar>
      {barItems}
      <CartesianGrid horizontal={false} />
      <XAxis
        type="number"
        reversed={true}
        domain={[0, MAX]}
      //hide={true}
      />
      <YAxis type="category"
        dataKey="name"
        orientation="right"
        hide={true}
      />
    </BarChart>
  );
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

如果你帮我解决 recharts 中的这个问题，我会很高兴。

Answer 1

根据您当前的代码，barItems 函数存在一个小问题

const barItems = props.properties.map((obj) => {
  <Bar dataKey={obj.key}
    fill={obj.color}
    radius={[0, 10, 10, 0]}
  >
  </Bar>
});

如您所见，您忘记了 return 条形组件，因此 return 什么都没有

试试这个

const barItems = props.properties.map((obj) => {
  return (<Bar dataKey={obj.key}
    fill={obj.color}
    radius={[0, 10, 10, 0]}
  >
  </Bar>)
});

或者使用粗箭头

const barItems = props.properties.map((obj) =>
  <Bar dataKey={obj.key}
    fill={obj.color}
    radius={[0, 10, 10, 0]}
  >
  </Bar>
);

如何将属性数组映射到重新图表中具有该属性的条形图？

How can I map an array of properties to a Bar with that properties in recharts?

javascript

typescript

reactjs

recharts