Question

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

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

在“图表”组件中将高度设置为“ 100％”无济于事。

Answer 1

使用highcharts-react-official包（> = 2.1）并设置Primary。

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

例如，您的render方法将如下所示：

containerProps={{ style: { height: "100%" } }}

Here is a live demo

确保您使用的是highcharts-react-official（see this github issue）的版本> = render() { return ( <HighchartsReact containerProps={{ style: { height: "100%" } }} highcharts={ Highcharts } options={ options } /> ); }

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

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

2 个答案: