3

我在反应中写了一个网格布局组件。在网格内部，我已经加载了高位图表，效果很好。在调整网格的宽度和高度时，高图表不会调整大小，并且在调整大小时会中断。我搜索了堆栈溢出，并在此处“使用 react-grid-layout 调整 highcharts 的大小不起作用”中找到了相同的问题。然后我才知道chart reflow当网格布局发生变化时，将调用该方法以使高图表适合网格。由于我是新来的反应，我不知道如何使它成为可能。帮我解决一些问题。

这是我尝试过的代码：

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;
4

2 回答 2

1

我认为调整 highchrts 大小的功能不起作用的原因可以从 hightcharts 的“reflow”文档中找到

默认情况下，根据 chart.reflow 选项，在 window.resize 事件之后，图表会自动回流到其容器。但是，对于 div 调整大小没有可靠的事件，因此如果在没有窗口调整大小事件的情况下调整容器大小，则必须显式调用。

这种情况与您现在所做的相符：您尝试调整 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
      }
    }
  };
  1. 使用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

于 2021-03-12T02:50:54.163 回答
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;
于 2019-08-05T12:44:16.073 回答