获取HighchartsReact组件以正确填充容器的问题

编程问答 2022-08-16

问题描述

我有一个3组件反应应用程序，外观精美，在左上方和右上方有两个股票反应图表，它们在漂亮的网格上方均匀划分了空间。如下所示。

enter image description here

这是我的仪表板的代码，您可以在其中看到两个相同的图表组件插入其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>
 )
}

因为我太喜欢海图了，所以决定用两个海图代替两个反应图。这是我用来替换两个原始图表的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组件替换时，仪表板看起来像这样，高图大小不相等，没有填满它们的div，并且两端几乎都有空格。

enter image description here

您是否知道是什么原因导致Highcharts弄乱了应用程序的格式/布局，而与顶部照片中的React Charts不一样呢？我尝试了重排修复，css修复，似乎无法理解为什么Highcharts会放弃所有内容。

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

P.S。这是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;
  }
 }

解决方法

答案很简单。高图的大小从display：grid推到自动列上。将网格的CSS更改为：使布局完全符合我的需求。

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