如何让 Highcharts 图表填充父高度？

Question

我有一张图表，我想将其填充为父母身高的 100%。

我已经看到了有关此主题的许多其他问题，其中大多数都指向类似于 Highcharts 文档 中描述的解决方案，因为我应该使用

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

。但是由于某种原因这对我不起作用。我设法让它工作的唯一方法是获取父 div 的绝对高度，并将容器的高度设置为绝对像素值，这是我想避免的。

下图显示containerProps实际上正在应用...背景颜色起作用了，并且显示高度为100%，但图表的高度仍然是默认的

400px

。

const chartRef = useRef<HighchartsReactRefObject>(null);

  // This useEffect was a desperation move that made no difference
  useEffect(() => {
    chartRef.current?.chart.reflow();
    console.log('reflow');
  }, [chartRef]);

  return (
    <HighchartsReact
      containerProps={{
        style: { height: '100%', backgroundColor: 'goldenrod' },
      }}
      ref={chartRef}
      highcharts={Highcharts}
      options={options}
    />
  );

Answer 1

维护者告知，这与highcharts React的实现有关。通过在样式级别将外部元素高度设置为 100% 来解决。值得注意的是，它是在风格层面上的。使用顺风来执行此操作

h-full

不起作用

 <div style={{ height: "100%" }}>
      <HighchartsReact
        containerProps={{ style: { height: "100%" } }}
        highcharts={Highcharts}
        options={options}
      />
</div>