如何在使用 React 调整窗口大小时缩放 Highcharts 高度

Question

我有这个例子https://stackblitz.com/edit/react-sjyuej?file=Chart1.jsx 我试图让左侧容器中的两个图表共享高度并响应窗口大小调整。

我通过设置溢出使宽度响应：隐藏，强制图表根据我的理解重新缩放，但我不知道如何获得与高度相同的效果。

在 Chart 组件中设置 height='100%' 没有帮助。

Answer 1

使用highcharts-react-official包 (>= 2.1) 并设置containerProps={{ style: { height: "100%" } }}.

这将使图表动态调整大小以填充其父 div。然后，您可以使用 flexbox 设置父 div 以获得所需的布局。

例如，您的渲染方法如下所示：

render() {
  return (
    <HighchartsReact
      containerProps={{ style: { height: "100%" } }}
      highcharts={ Highcharts }
      options={ options }
    />
  );
}

这是一个现场演示

确保您使用的是2.1highcharts-react-official 的>= 版本（请参阅此 github 问题）

Answer 2

设置完后height，需要使用chart.reflow()方法：

componentDidMount(){
  const container = this.chartComponent.current.container.current;
  const table = document.getElementsByClassName('table')[0];

  container.style.height = table.clientHeight + 'px';
  this.chartComponent.current.chart.reflow();
}

API： https: //api.highcharts.com/class-reference/Highcharts.Chart#reflow

现场演示：https://stackblitz.com/edit/react-3jwwvt? file=ChartOfficial.jsx