React - Highcharts 全屏黑条

Question

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

我需要为我的图表设置一个固定的高度，并且能够以全屏方式查看我页面上的每个图表，但由于高度是固定的，所以在全屏加载时它保持不变，我试过了来自 post 的方法，但它不起作用，如果我将高度设置为 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 上执行此操作，但由于某种原因全屏无法在那里工作，它会提示此消息

Full screen is not supported inside a frame.

Answer 1

这 demo creates the chart without using Highcharts React wrapper - it's a combination of pure Highcharts JS and React - that's why export menu shows without called it. The Highcharts React wrappers 的工作方式类似，但在 'React way' 中更多，并提供了管理组件的其他机会。

回到您的问题 - 我认为更好的方法是将 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 codesandbox 选项（导出菜单汉堡包上方的按钮）。

React - Highcharts 全屏黑条

React - Highcharts Full Screen black bar

javascript

css

reactjs

highcharts

react-highcharts