使用 Reactjs 的 HighStocks - 使其占据 div 容器的完整大小答案

【问题标题】：HighStocks with Reactjs - Make it occupy full size of div container使用 Reactjs 的 HighStocks - 使其占据 div 容器的完整大小
【发布时间】：2020-02-20 15:11:53
【问题描述】：

我正在使用 React https://www.highcharts.com/blog/tutoria 的 HighCharts 包装器尝试使用 HighStocks 进行 React ... react-101/

当 div 容器使用 100% 宽度和 100% 高度以及具有 height:calc(100% - 40px) 的子容器时，我无法让 HighStocks 控件占据整个容器大小；

如果有一个可以共享的示例或示例显示 HighStocks 使用 React 的 HighCharts 包装器在 React 中占据整个 div 容器大小，那将非常有帮助。

【问题讨论】：

可以分享一下相关代码sn-p吗？
您能否在此演示中重现您的案例：codesandbox.io/s/highcharts-react-demo-guklh？
谢谢@AndrewA。和 Sebastian Wedzel 寻求帮助。

标签： css reactjs highcharts

【解决方案1】：

可能是，我不清楚我面临的问题。我担心的是，HighCharts/HighStocks 的 React 包装器没有占据包含 div 的全部高度。

报告的问题：带有 React 的 HighCharts/HighStock 没有占据整个高度

根据 Highcharts 文档：

Highcharts/HighStocks - 默认情况下（当为 null 时）高度为从包含元素的偏移高度计算，或 400 如果包含元素的高度为 0，则为像素。 https://api.highcharts.com/highcharts/chart.height

对于带有 React 的 HighCharts/HighStocks，React 包装器会添加一个 div 元素，HighCharts/HighStocks 在此 div 中呈现，因此 HighCharts/HighStocks 会获取此 div 元素的高度。

解决方案： 添加下面的 CSS 以设置由 React 包装器添加的 div 的样式可以解决此问题。 [没有这个css样式，HighChart/HighStock会恢复到默认高度400px，不会占据整个高度]

div[data-highcharts-chart] {
  height: 100%;
  width: 100%;
}

以下是工作示例： https://codesandbox.io/s/busy-hooks-27uvb?fontsize=14&hidenavigation=1&theme=dark

【讨论】：