我正在做出反应并使用带有react-grid-layout的highcharts来调整div中的元素。某种程度上可调整大小的功能适用于图像，但不适用于高图。 Grid.js是一个生成ResponsiveReactGridLayout的文件，它从chart.js文件中获取高图。请找到以下代码。
//Grid.js
import React, { Component } from 'react';
import {Responsive, WidthProvider,ReactGridLayout} from 'react-grid-layout';
import Charts from './charts.js';
const ResponsiveReactGridLayout = WidthProvider(Responsive);
class Grid extends Component {
onLayoutChange(layout) {
console.log(layout);
}
render(){
return (<div style={{borderStyle: 'groove'}}>
<h2> Panel Header </h2>
<ResponsiveReactGridLayout className="layout"
breakpoints={{lg: 1200, md: 96, sm: 768}}
cols={{lg: 5, md: 10, sm: 6}}
onLayoutChange={this.onLayoutChange}>
<div key="c" data-grid={{x: 0, y: 0, w: 1, h: 3}} style={{ border:'1px solid green', borderStyle: 'groove'}}>
<img src="https://cdn.geckoandfly.com/wp-content/uploads/2013/03/530-smiley-face.jpg" style={{width:'inherit', height:'inherit'}} />
</div>
<div key="d" className = 'react-grid-item react-resizable'
data-grid={{x: 1, y: 0, w: 1, h: 3}} style={{ border:'1px solid green', borderStyle: 'groove'}}
>
<Charts style={{width:'inherit'}} id={'Chart 1'}/>
</div>
<div key="e" data-grid={{x: 2, y: 0, w: 1, h: 3}} style={{ border:'1px solid green',borderStyle: 'groove'}}>
<Charts style={{width:'inherit'}} id={'Chart 2'}/>
</div>
<div key="f" data-grid={{x: 3, y: 0, w: 1, h: 3}} style={{ border:'1px solid green',borderStyle: 'groove'}}>
<Charts style={{width:'inherit'}} id={'Chart 3'}/>
</div>
</ResponsiveReactGridLayout>
</div>
)
}
}
export default (Grid);
//Charts.js
import React, { Component } from 'react';
const Highcharts = require('highcharts');
class Charts extends Component{
constructor(props){
super(props);
this.state = {
data : {
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 295.6, 454.4]
}]
},
pieData: [{name: "Firefox",y: 6},{name: "MSIE",y: 4},{name: "Safari",y: 4},{name: "Opera",y: 1},{name: "Chrome",y: 7}]
};
}
/**
* Inject highcharts markup into the DOM after the rest of the component has mounted
* @return {None}
*/
componentDidMount() {
// Load in any highcharts modules
if (this.props.modules) {
this.props.module.forEach((module) => {
module(Highcharts);
});
}
// Create the actual chart and assign reference
const props = this.processPropsModel(this.props);
const containerRef = `container${props.id}`;
this.chart = new Highcharts.chart(
containerRef,
props.options
);
}
processPropsModel(props) {
const newProps = {};
newProps.id = this.props.id;
newProps.options = this.generateDefaultOptions();
return newProps;
}
/**
* Generating some default chart options for placeholding purposes
* @return {Object} The options to be passed into the chart
*/
generateDefaultOptions() {
return {
title: {
text: this.props.id,
x: -20 //center
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: null
}
},
tooltip: {
valueSuffix: '°C'
},
series: [{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}]
};
}
render(){
const props = this.processPropsModel(this.props);
return (
<div id={`container${props.id}`}>
</div>
);
}
}
export default Charts;
答案 0 :(得分：1)
因此，我在使用highcharts-react-official和react-grid-layout时遇到同样的问题。
这是我终于可以正常工作的方式。
下面是我的响应式网格布局，仅供参考。
// Component/Grid/Grid.js
<ResponsiveGridLayout
...
>
{this.state.widgets.map((widget) =>
<Card key={widget.DWG_ID}>
<Widget
widget={widget}
/>
</Card>
)}
</ResponsiveGridLayout>
现在，在“窗口小部件”组件内部，将将成为您的图表的父级的所有div的高度设置为100％。
// Component/Widget/Widget.js
<CardBody className="widgetContent">
<CardTitle className="widget-title">{this.props.widget.DWG_LABEL}</CardTitle>
<Chart
widget={this.props.widget}
/>}
</CardBody>
对于上述jsx，我只需要对具有classWidgetContent类的CardBody元素执行此操作，所以
// Component/Widget/Widget.css
.widgetContent { height: 100%; }
现在，在图表组件（所有乐趣所在的地方）中，我不得不创建一个非常难看的div，以便能够识别highcharts创建的最外面的div。
elements created by highcharts
有问题的div可以在上图中看到，就在div下，类为highchartsWrapper，其属性为data-highcharts-chart。 这个div是我的图表中唯一无法直接确定高度为100％的父级。因此，我创建了包装器，以便能够明确识别它。 请注意，在图表选项中，我们还传递了一个类名，以便能够为图表本身提供css height属性。
如果有人对如何识别此有问题的div抱有更整洁的想法，请告诉我。
// Component/Chart/Chart.js
options = {
...
chart: { className: 'chart' }
}
<div className="highchartsWrapper">
<HighchartsReact
highcharts={Highcharts}
options={options}
callback={(chart) => this.setChart(chart)}
/>
</div>
所以我可以给它css
// Component/Chart/Chart.css
.highchartsWrapper > div {
height: 100%;
}
.chart {
height: 100%;
}
现在，理想情况下，您的高度图表将假定正确的宽度和高度。但是还有另一个复杂之处：当高图第一次渲染并检查其父母的身高时，他的调整大小魔术还没有完成react-grid-layout。这意味着您的图表将很小。此外，当您调整网格项目的大小时，您希望highchart调整为新的父级大小。但是，等等，我之前在highcharts上工作过，我知道该怎么做！好旧的chart.reflow（）！不幸的是，最终结果并非如此简单。
首先，仅获得可以调用重排的图表对象并不是一件容易的事。如果您注意到了，我给了HighchartsReact一个回调
(chart) => this.setChart(chart)
这只是将图表对象存储为我的类组件的属性。我的setChart函数仅执行以下操作：
setChart(chart) {
this.chart = chart;
}
这样做似乎很愚蠢。为什么不直接将setChart赋予HighchartsReact的回调属性？好吧，因为根据highcharts-react-official的文档，如果这样做了，则setChart函数中的this将成为您的图表对象。所有这些都非常令人困惑，但似乎可以这样工作。
同样，如果有人有更整洁的解决方案，请告诉我
最后，当我们的图表组件更新时，我们可以调用this.chart.reflow（）。我所做的就像是
constructor() {
super(props)
this.firstResize = true;
}
componentDidUpdate(prevProps) {
if (this.didWidgetSizeChange(prevProps) || this.isFirstResize) {
this.chart.reflow();
this.isFirstResize = false;
}
}
当组件更新时，我们称为图表重排。在componentDidMount上，网格项目尚未确定其最终大小，因此我使用了一个标志来计算出第一次更新（即：网格项目已完成第一次调整大小）。然后，对于其他任何更新，我编写了一个函数，该函数基本上将此网格项目的先前布局与新布局进行比较，以确定大小或宽度是否已更改。如果是这样，我们再次进行重排以将高图的大小调整为新的网格项目大小。
希望这会有所帮助！
和平！
答案 1 :(得分：1)
我认为调整 highchrts 大小的功能不起作用的原因您可以从 the documentation of 'reflow' from hightcharts
<块引用>默认情况下，根据 chart.reflow 选项，图表会在 window.resize 事件后自动回流到其容器。但是，没有可靠的 div resize 事件，因此如果在没有窗口 resize 事件的情况下调整容器大小，则必须显式调用。
情况与您现在所做的相符：您尝试调整 div 本身的大小而不是窗口大小，因此它没有按您预期的那样工作。
我做了什么使我的图表在网格中可调整大小，如下所示：
const onLayoutChange = () => {
for (let i = 0; i < Highcharts.charts.length; i += 1) {
if (Highcharts.charts[i] !== undefined) {
Highcharts.charts[i].reflow(); // here is the magic to update charts' looking
}
}
};
onLayoutChange提供的react-grid-layout<GridLayout
cols={12}
layout={layout}
rowHeight={30}
width={1200}
onLayoutChange={() => onLayoutChange()}
>
...
</GridLayout>
然后……砰！您可以通过 react-grid-layout 中的调整大小按钮控制可调整大小的图表。
简单易懂，你可以在这里查看我的游乐场： https://codesandbox.io/s/resize-highcharts-in-grid-9e625?file=/src/App.js
答案 2 :(得分：0)
这里是使它适合网格的示例解决方案。...
import React from 'react';
import './App.css';
import '/node_modules/react-grid-layout/css/styles.css';
import '/node_modules/react-resizable/css/styles.css';
import GridLayout from 'react-grid-layout';
import Highcharts from "highcharts/highstock";
import HighchartsReact from "highcharts-react-official";
const options = {
series: [
{
data: [1, 2, 3]
}
]
};
class MyFirstGrid extends React.Component {
constructor(props) {
super(props);
this.myRef = React.createRef();
this.conRef = React.createRef();
}
render() {
// layout is an array of objects, see the demo for more complete usage
var layout = [
{ i: "a", x: 0, y: 0, w: 5, h: 5 },
{ i: "b", x: 1, y: 0, w: 3, h: 2 },
{ i: "c", x: 4, y: 0, w: 1, h: 2 }
];
return (
<GridLayout
className="layout"
layout={layout}
cols={12}
rowHeight={30}
width={1200}
onResizeStop={function(event) {
this.myRef.current.chart.setSize(this.conRef.current.clientWidth,this.conRef.current.clientHeight)
console.log('hello', event);
}.bind(this)}
>
<div ref={this.conRef} style={{ backgroundColor: "#00000000" }} key="a">
<HighchartsReact
ref= {this.myRef}
containerProps={{ style: { width: '100%', height: '100%' } }}
options={options}
highcharts={Highcharts}
/>
</div>
<div style={{ backgroundColor: "red" }} key="b">
b
</div>
<div style={{ backgroundColor: "blue" }} key="c">
c
</div>
</GridLayout>
);
}
}
export default MyFirstGrid;