所以，我在使用 highcharts-react-official 和 react-grid-layout 时遇到了同样的问题。

这是我最终让它工作的方式。

tl;博士

1. 为所有图表的父项提供 100% 的高度，直到网格项。
2. highcharts 自己创建了一个烦人的 div。找到一种方法来识别它并给它 100% 的高度。
3. 为图表本身提供 100% 的高度。
4. 使用 react highcharts 回调来获取您的图表对象。
5. 当您的组件更新回流图表时。

下面是我的响应式网格布局，只是为了提供一些上下文。

// Component/Grid/Grid.js
<ResponsiveGridLayout
    ...
>
    {this.state.widgets.map((widget) =>
        <Card key={widget.DWG_ID}>
            <Widget
                widget={widget}
            />
        </Card>
    )}
</ResponsiveGridLayout>

现在，在 Widget Component 中，将作为 highchart 父级的任何 div 的高度设置为 100%。

// Component/Widget/Widget.js
<CardBody className="widgetContent">
    <CardTitle className="widget-title">{this.props.widget.DWG_LABEL}</CardTitle>
    <Chart      
        widget={this.props.widget}
    />}     
</CardBody>   

对于上面的 jsx，我只需要为具有类 widgetContent 的元素 CardBody 执行此操作，所以

// Component/Widget/Widget.css
.widgetContent { height: 100%; }

现在，在图表组件（所有的乐趣所在）中，我必须创建一个非常丑陋的 div，以便能够识别 highcharts 创建的最外面的 div。

由 highcharts 创建的元素

臭名昭著的 div 可以在上图中看到，就在具有类 highchartsWrapper 的 div 下方，具有属性 data-highcharts-chart 。这个 div 是我图表的唯一父级，我无法直接识别以提供 100% 的高度。所以我创建了包装器以便能够明确地识别它。请注意，在图表选项中，我们还传递了一个类名，以便能够为图表本身提供 css 高度属性。

如果有人对如何识别这个有问题的 div 有更清晰的想法，请告诉我。

// Component/Chart/Chart.js
options = {
    ...
    chart: { className: 'chart' }
}
<div className="highchartsWrapper">
    <HighchartsReact
        highcharts={Highcharts}
        options={options}
        callback={(chart) => this.setChart(chart)}
    />
</div>

所以我可以给它 css

// Component/Chart/Chart.css
.highchartsWrapper > div {
    height: 100%;
}
.chart {
    height: 100%;
}

现在您的 highchart 理想情况下会假设正确的宽度和高度。但是还有另外一个问题：当 highchart 第一次渲染并检查他父母的身高时，react-grid-layout 还没有完成调整大小的魔法。这意味着您的图表将很小。此外，当您调整网格项目的大小时，您希望 highchart 调整到其新的父级大小。但是等等，我以前用过 highcharts，我知道怎么做！好旧的 chart.reflow() ！不幸的是，这最终并没有那么容易。

首先，仅仅获取我可以调用回流的图表对象并不是很简单。如果你注意到，我给了我的 HighchartsReact 一个回调

(chart) => this.setChart(chart)

这只是为了将图表对象存储为我的类组件的属性。我的 setChart 函数仅执行以下操作：

setChart(chart) {
    this.chart = chart;
}

这样做似乎很愚蠢。为什么不直接将 setChart 赋予 HighchartsReact 的回调属性？好吧，因为如果你这样做，根据 highcharts-react-official 文档，你在 setChart 函数中的 this 将是你的图表对象......一切都非常令人困惑，但它似乎是这样工作的。

同样，如果有人有更简洁的解决方案，请告诉我

最后，当我们的图表组件更新时，我们可以调用我们的 this.chart.reflow()。我所做的就像

constructor() {
    super(props)

    this.firstResize = true;
}

componentDidUpdate(prevProps) {

    if (this.didWidgetSizeChange(prevProps) || this.isFirstResize) {
        this.chart.reflow();
        this.isFirstResize = false;
    }
}

当组件更新时，我们称之为图表回流。在 componentDidMount 上，网格项还没有最终大小，所以我使用了一个标志来确定第一次更新（这就是：网格项已完成第一次调整大小）。然后对于任何其他更新，我编写了一个函数，该函数基本上将这个网格项目的先前布局与新布局进行比较，以确定大小或宽度是否发生了变化。如果是这样，我们再次回流以将 highcharts 大小调整为新的网格项大小。

希望这可以帮助！

和平！

这是使其适合网格的示例解决方案....

import React from 'react';
import './App.css';
import '/node_modules/react-grid-layout/css/styles.css';
import '/node_modules/react-resizable/css/styles.css';
import GridLayout from 'react-grid-layout';
import Highcharts from "highcharts/highstock";
import HighchartsReact from "highcharts-react-official";

const options = {
  series: [
    {
      data: [1, 2, 3]
    }
  ]
};

class MyFirstGrid extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
    this.conRef = React.createRef();
  }

  render() {
    // layout is an array of objects, see the demo for more complete usage
    var layout = [
      { i: "a", x: 0, y: 0, w: 5, h: 5 },
      { i: "b", x: 1, y: 0, w: 3, h: 2 },
      { i: "c", x: 4, y: 0, w: 1, h: 2 }
    ];
    return (
      <GridLayout
        className="layout"
        layout={layout}
        cols={12}
        rowHeight={30}
        width={1200}
        onResizeStop={function(event) {

         this.myRef.current.chart.setSize(this.conRef.current.clientWidth,this.conRef.current.clientHeight)
          console.log('hello', event);
        }.bind(this)}
      >
        <div ref={this.conRef}  style={{ backgroundColor: "#00000000" }} key="a">
          <HighchartsReact
            ref= {this.myRef}
            containerProps={{ style: { width: '100%', height: '100%' } }}
            options={options}
            highcharts={Highcharts}
          />
        </div>

        <div style={{ backgroundColor: "red" }} key="b">
          b
        </div>
        <div style={{ backgroundColor: "blue" }} key="c">
          c
        </div>
      </GridLayout>
    );
  }
}


export default MyFirstGrid;

我认为调整 highchrts 大小的功能不起作用的原因您可以从 hightcharts 的“回流”文档中找到它

默认情况下，根据 chart.reflow 选项，图表会在 window.resize 事件之后自动回流到其容器。但是，div resize 没有可靠的事件，因此如果在没有窗口 resize 事件的情况下调整容器大小，则必须显式调用它。

这种情况与您现在所做的相符：您尝试调整 div 本身的大小而不是窗口大小，因此它没有按预期工作。

我做了什么使我的图表在网格中可调整大小，如下所示：

1. 创建一个函数来进行回流

const onLayoutChange = () => {
    for (let i = 0; i < Highcharts.charts.length; i += 1) {
      if (Highcharts.charts[i] !== undefined) {
        Highcharts.charts[i].reflow(); // here is the magic to update charts' looking
      }
    }
  };

2. 使用onLayoutChange提供react-grid-layout

<GridLayout
    cols={12}
    layout={layout}
    rowHeight={30}
    width={1200}
    onLayoutChange={() => onLayoutChange()}
>
...
</GridLayout>

然后……砰！您可以通过 中的调整大小按钮控制可调整大小的图表react-grid-layout。

让它容易理解，你可以在这里查看我的游乐场：https : //codesandbox.io/s/resize-highcharts-in-grid-9e625?file=/ src/ App.js