我在 react 中编写了一个网格布局组件。在网格内,我加载了 Highcharts ,效果很好。在调整网格的宽度和高度大小时, Highcharts 不会调整大小,并且在调整大小时会中断。
我搜索了堆栈溢出并在这里发现了同样的问题“Resize highcharts using react-grid-layout not working ”。然后我知道当网格布局发生变化时,要调用图表重排
方法来使 Highcharts 适合网格。由于我是新手,所以我不知道如何使其成为可能。帮我提供一些解决方案。
这是我尝试过的代码:
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;
最佳答案
我想调整highchrts大小的功能不起作用的原因你可以从the documentation of 'reflow' from hightcharts找到它。
By default, the chart reflows automatically to its container following a window.resize event, as per the chart.reflow option. However, there are no reliable events for div resize, so if the container is resized without a window resize event, this must be called explicitly.
情况与您现在所做的相符:您尝试调整 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
}
}
};
- 使用
react-grid-layout
提供的onLayoutChange
<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
关于reactjs - 使用 React 根据网格布局宽度和高度调整 Highcharts 的大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57265992/