Recharts 2.0.8 <ResponsiveContainer> </ResponsiveContainer> 在 IE11 中不工作

Question

我运行遇到无法在 IE11 中使用 Rechart 的 <ResponsiveContainer></ResponsiveContainer> 的问题。

<ResponsiveContainer width="100%" height={x + (y ? 10 : 0)}>
                    <BarChart...>
</BarChart>
</ResponsiveContainer>

虽然上面的代码在其他浏览器上运行良好，但在 IE 11 上，我得到以下错误：

The above error occurred in the component: in ResizeDetector (created by ResponsiveContainer) in ResponsiveContainer (at chart-widget.tsx:286) in div (at chart-widget.tsx:285)

Consider adding an error boundary to your tree to customize e

只要我用简单的 <div></div> 标签更改 <ResponsiveContainer></ResponsiveContainer> 标签，图表就会在 IE11 中正确呈现。

<div width="100%" height={x + (y ? 10 : 0)}>
                    <BarChart...>
</BarChart>
</div>

任何人都可以帮助我为什么 <ResponsiveContainer> 标记在 IE11 中不起作用，我怎样才能让它起作用？

提前致谢

Answer 1

我尝试使用 recharts@2.0.8，但我得到了同样的错误。出现错误是因为ResizeDetector使用ResizeObserver who is not supported by IE. Using this polyfill修复问题：

npm install resize-observer-polyfill

在你的index.js中：

import 'resize-observer-polyfill/dist/ResizeObserver.global'

有了recharts@2.0.9问题就解决了。

Recharts 2.0.8 <ResponsiveContainer> </ResponsiveContainer> 在 IE11 中不工作

Recharts 2.0.8 <ResponsiveContainer> </ResponsiveContainer> not working in IE11

javascript

internet-explorer

reactjs

recharts

react-hooks