reactjs - Recharts 堆叠区域显示错误的 yAxis 标签？

Question

http://recharts.org/en-US/examples/StackedAreaChart

这个例子说明了，我也做了指针，值的值与标签不对应，为什么会这样？有什么解释以及如何解决吗？

标签： reactjsd3.jsreact-componentrecharts

Answer 1

您可以使用它的contentprop自定义工具提示。

传递到那里的组件接收与 Rechart 相同的道具，Tooltip因此您只需要覆盖所需的并绕过其余部分。如果您不想更改工具提示的视觉部分，您可以Tooltip在最后返回另一个。

// Do not pass the `content` since it causes a recursive rendering
const CumulativeTooltip = ({ content, payload, ...props }) => {
  const values = payload.map(({ value }) => value);
  const cumulativePayload = payload.reduce((result, item, index) => result.concat({
    ...item,
    value: values.slice(0, index + 1).reduce((sum, v) => sum + v, 0)
  }), []);

  return (<Tooltip {...props} payload={cumulativePayload} />);
}

// ... later in chart

<Tooltip content={<CumulativeTooltip/>}/>

操场