Recharts 2.0.8 <ResponsiveContainer> </ResponsiveContainer> 不适用于 IE11

问题描述

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

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

虽然上面的代码适用于其他浏览器，但对于 IE 11，我得到以下错误：

组件出现上述错误： 在 ResizeDetector 中（由 ResponsiveContainer 创建） 在 ResponsiveContainer 中（在 chart-widget.tsx:286） 在 div 中（在 chart-widget.tsx:285）

考虑在树中添加错误边界以自​​定义 e

一旦我将 <ResponsiveContainer></ResponsiveContainer> 标签更改为如下简单的 <div></div> 标签，图表就会在 IE11 中正确呈现。

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

任何人都可以帮助我为什么 <ResponsiveContainer> 标记在 IE11 中不起作用以及如何使其起作用？

提前致谢

解决方法

我尝试使用 recharts@2.0.8，但遇到了同样的错误。出现错误是因为 ResizeDetector 使用了 IE 不支持的 ResizeObserver。使用此polyfil可以解决问题：

npm install resize-observer-polyfill

在你的 index.js 中：

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

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