Recharts堆积条形图顺序和图例不一致答案

【问题标题】：Recharts stacked barchart order and legend are inconsistentRecharts堆积条形图顺序和图例不一致
【发布时间】：2021-08-28 10:06:00
【问题描述】：

我正在 ReactJS 中使用 ReCharts 制作一个图形。在堆积条形图中，图例顺序与垂直条形图不一致。条形图顺序应从上到下与图例一致。有谁知道解决方法？我试图通过将className 添加到<Legend /> 来更改Legend 的顺序，但它没有用。 className 不是通用道具吗？它有ul 和li，所以如果我可以将ul 和li 的样式更改为倒序，我会很高兴。

官方例子：https://recharts.org/en-US/examples/StackedBarChart
问题：https://github.com/recharts/recharts/issues/209
jsfiddle:http://jsfiddle.net/j8csfvh1/12

【问题讨论】：

标签： reactjs recharts

【解决方案1】：

在这种情况下，您可以使用您的自定义结构（html 和 css）并基于使用道具内容的有效负载值呈现自定义图例，这是文档：

https://recharts.org/en-US/api/Legend#content

这是对您的代码的改编，它只需要在 css 方面进行一些增强：

http://jsfiddle.net/tahalz/9427x1m8/

const renderLegend = (props) => {
  const { payload } = props;
  console.log(payload)
  return (
    <div>
      {
        payload.reverse().map((entry, index) => (
          <span key={`item-${index}`}><div style={{display:'inline-block',width:'12px',height:'12px',backgroundColor:entry.color}}></div>{entry.value}</span>
        ))
      }
    </div>
  );
}

...

<Legend content={renderLegend}/>

【讨论】：