我在React中编写了一个网格布局组件,里面加载了High Chart,效果很好。但是,在调整网格的宽度和高度时,High Chart不会自动调整大小,并且调整大小后可能会出现问题。我在Stack Overflow上搜索到了同样的问题,链接为:Resize highcharts using react-grid-layout not working。然后我知道需要调用
chart reflow
方法来使High Chart在网格布局发生变化时适应网格布局。由于我是React的新手,不知道如何实现此功能。请提供一些解决方案。以下是我尝试的代码:import React from 'react';
import logo from './logo.svg';
import './App.css';
import '/home/paulsteven/Documents/resize-ui/resize_ui/node_modules/react-grid-layout/css/styles.css';
import '/home/paulsteven/Documents/resize-ui/resize_ui/node_modules/react-resizable/css/styles.css';
import GridLayout from 'react-grid-layout';
import BarChart from "highcharts-react-official";
class MyFirstGrid extends React.Component {
state ={
options :{reflow:true,
title: {
text: 'Fruit Consumption'
},
subtitle: {
text: 'Steven Chart'
},
chart: {
type: 'bar'
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [{
name: 'Prince',
data: [4, 4, 2]
}, {
name: 'Syed',
data: [5, 3, 5]
},
{
name: 'Sam',
data: [1, 3, 3]
}]
}
}
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: 2},
{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}>
<div style={{backgroundColor: 'grey'}} key="a">
{/* <div id="container" style={{width:'100%',height:'400px'}}></div> */}
<BarChart options ={this.state.options} />
</div>
<div style={{backgroundColor: 'red'}}key="b">b</div>
<div style={{backgroundColor: 'blue'}} key="c">c</div>
</GridLayout>
)
}
}
export default MyFirstGrid;
antd
:https://github.com/highcharts/highcharts-react/issues/121。解决方案是设置`hasSider`属性,在`react-grid-layout`中是否有类似的东西? - ppotaczek