reactjs - 使用 React 根据网格布局宽度和高度调整 Highcharts 的大小

Question

我在 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;

Answer 1

我想调整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 本身的大小，但没有调整窗口大小，因此它无法按您的预期工作。

我做了什么来使我的图表在网格中调整大小，如下所示:

1. 创建一个函数来执行回流

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