问题让 HighchartsReact 组件正确填写容器答案

【问题标题】：Issue getting HighchartsReact component to fill out container correctly问题让 HighchartsReact 组件正确填写容器
【发布时间】：2020-12-05 07:43:05
【问题描述】：

我有一个 3 组件的 react 应用程序，看起来很漂亮，左上角和右上角有两个股票反应图表，将 空间均匀 分隔在一个漂亮的网格上方。如下所示。

这是我的仪表板的代码，您可以在其中看到两个相同的图表组件被插入到它们的 div 中。

import React from "react";


import AllocationPanel from "./panels/AllocationPanel";
import PerformancePanel from "./panels/PerformancePanel";
/*import PositionsPanel from "./panels/PositionsPanel";*/
import AgPositionPanel from "./panels/AgPositionPanel";


export default function Dashboard() {
return (
<div className="panels">
  <div className="panel-info">
    
  </div>
  <div className="panel-allocation" >
    <PerformancePanel />
  </div>
  <div className="panel-balance">
    <PerformancePanel />
  </div>
  <div className="panel-positions">
    <AgPositionPanel />
  </div>
</div>
 )
}

因为我非常喜欢 highcharts，所以我决定用两个 highcharts 替换两个 react 图表。这是我用来替换两个原始图表的 ReactHighcharts 组件的代码。如您所见，一个非常简单的图表。

import React, {Component} from 'react'
import Highcharts from 'highcharts'
import HighchartsReact from 'highcharts-react-official'

const options = {
 title: {
   text: 'highcharts-react-official'
},
  series: [{
  data: [1, 5, 3, 4]
}]
}

export default class AllocationPanel extends Component{
constructor(){
super();
this.chartComponent = React.createRef();

}
componentDidMount(){
this.chartComponent.current.chart.reflow();
}
render() {
 return(
  <HighchartsReact
    highcharts={Highcharts}
    options={options}
    ref={this.chartComponent}
  />
);
}
}

当我用上面的 ReactHighCharts 组件替换时，仪表板看起来像这样，highcharts 大小不等，没有填满它们的 div，看起来两端几乎都有空白。

您知道是什么原因导致 Highcharts 弄乱了应用程序的格式/布局，并且与顶部照片中的 React Charts 不匹配吗？我已经尝试过回流修复、css 修复，但似乎无法理解为什么 Highcharts 会抛出所有问题。

如果您有任何想法，请告诉我。我已经用尽了其他帖子，互联网搜索并且似乎无法让两个高图均匀地分割窗口并随窗口调整大小。谢谢！

附：这是 3 个 div 容器的 CSS，它有帮助。我觉得我错过了一些简单的东西。

.panels {
   display: grid;
  grid-gap: 10px;
  grid-template-columns: 1px auto auto;
  grid-template-rows: auto auto;
  overflow:hidden;
}
.panel-info {
  grid-row: span 2;
}
.panel-allocation {
  overflow:hidden ;
}
.panel-balance {
  overflow:hidden ;
}
.panel-positions {
grid-column: span 2;
}
.panels > div {
  /* border: 1px solid black; */
}

@media (max-width: 750px) {
.panels {
  grid-template-columns: 1px auto;
  grid-template-rows: auto auto auto;
 }
.panel-positions {
  grid-column: span 2;
  }
 }

 @media (max-width: 750px) {
 .panels {
    grid-template-columns: auto;
  }
.panel-positions {
  grid-column: span 1;
  }
 }

【问题讨论】：

经过大量研究，这与 highcharts 不遵守 display:grid 在父 div .panels CSS 中有关。原始反应图表适合显示：网格很好。我不明白为什么 highcharts 会扩展网格的左侧。

标签： reactjs highcharts containers width reflow

【解决方案1】：

答案很简单。 highchart 的大小从 display:grid 推到 auto 列上。将网格的 CSS 更改为：使布局完全符合我的要求。

.panels {
display: grid;
grid-gap: 1px;
grid-template-columns: 0px 50% 50%;
grid-template-rows: auto auto;
overflow:hidden;
}

【讨论】：