反应-高图表全屏黑条

Question

我正在尝试使用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复制我的应用程序，由于导入结构，我只能在codesandbox上执行此操作，但是由于某种原因，全屏无法正常工作，它会提示此消息]

框架内不支持全屏。

我正在尝试使用highcharts / highstock实现应用程序，并且在尝试使用全屏功能时遇到了问题。我需要为图表设置一个固定的高度，并能够查看每个图表...

Answer 1

此demo无需使用Highcharts React包装器即可创建图表-它是纯Highcharts JS和React的结合-这就是为什么导出菜单显示时不调用它的原因。 Highcharts React wrappers的工作方式类似，但更多地以“反应方式”进行，并提供了管理组件的其他机会。