React - Highcharts 全屏黑条答案

【问题标题】：React - Highcharts Full Screen black barReact - Highcharts 全屏黑条
【发布时间】：2020-04-14 12:58:54
【问题描述】：

我正在尝试使用 highcharts/highstock 实现应用程序，但在尝试使用全屏功能时遇到了问题。

我需要为我的图表设置一个固定的高度，并能够从我的页面将每个图表作为全屏查看，但由于高度是固定的，因此在全屏加载时它保持不变，我尝试了这种方法来自this 的帖子，但它不起作用，如果我将高度设置为 100%，图表会溢出页面并根据屏幕的纵横比被裁剪。

我还找到了 this 工作演示，我无法复制这个。我不确定他是如何调用该组件的，我也不知道如果从未调用过导出模块（汉堡菜单）是如何显示的。

render() {
    return <div className="chart" ref={ref => this.container = ref} />
  }

在我的应用程序中，我以这种方式调用组件

render() {
  return (
    <HighchartsReact
      highcharts={Highcharts}
      constructorType="stockChart"
      options={options}
      allowChartUpdate
      callback={this.afterChartCreated}
    />
  )
}

我尝试将 ID 传递给该元素以尝试通过 CSS 设置 height，但它不起作用。

我试图用 working example 复制我的应用程序，由于导入结构，我只能在代码框上执行此操作，但由于某种原因全屏无法在那里工作，它会提示此消息

框架内不支持全屏。

【问题讨论】：

标签： javascript css reactjs highcharts react-highcharts

【解决方案1】：

这个demo 在不使用 Highcharts React 包装器的情况下创建图表 - 它是纯 Highcharts JS 和 React 的组合 - 这就是为什么导出菜单显示而不调用它的原因。 Highcharts React wrappers 的工作方式类似，但更多的是“反应方式”，并提供了管理组件的其他机会。

回到您的问题 - 我认为更好的方法是将 Highcharts 组件的高度定义为内联 React 样式。可以通过在containerProps对象中设置来实现。

    <CardContent style={{ padding: 0 }}>
      <HighchartsReact
        highcharts={Highcharts}
        containerProps={{ style: { height: "400px" } }}
        options={options}
        allowChartUpdate
      />
    </CardContent>

演示：https://codesandbox.io/s/fix-full-screen-253sq?file=/src/CustomGUIChart.js

要对其进行测试，请使用 open in new window 代码框选项（在导出菜单汉堡上方的按钮）。

【讨论】：