Recharts 堆叠条形图顺序和图例不一致

Question

我正在 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

Answer 1

在这种情况下，您可以使用您的自定义结构（html 和 css）渲染自定义图例，并基于有效负载值使用 prop 内容，这里是文档 :

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

Recharts 堆叠条形图顺序和图例不一致

Recharts stacked barchart order and legend are inconsistent

reactjs

recharts