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

Question

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

我通过设置溢出来响应宽度：隐藏，迫使图表尽我所能重新缩放，但我不知道如何在高度上获得同样的效果。

在"图表"组件中设置高度="100%"没有帮助。

Answer 1

使用highcharts react官方包(>=2.1(并设置containerProps={{ style: { height: "100%" } }}。

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

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

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

这是的现场演示

确保您使用的是>=2.1版的highcharts 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