當我使用功能性反應組件時，如何從 HighchartsReact 組件訪問圖表到 ResponsiveGridLayout 組件

Question

我正在嘗試使用 react 和 react-grid-layout 實現 highChart。 圖表應根據 react-grid-layout 調整大小，為此，我需要在 ResponsiveGridLayout 的onResizeStop屬性中傳遞chart.reflow() 。 我可以訪問 HighchartsReact 的回調屬性中的圖表，但我無法弄清楚如何訪問 ResponsiveGridLayout 組件中的圖表以將其傳遞到 onResizeStop 屬性中。

import { Responsive, WidthProvider } from 'react-grid-layout';
import Highcharts, { chart } from 'highcharts'
import HighchartsReact from 'highcharts-react-official'
import { useRef, useState } from "react"
import styles from './Blocks.module.css';

const ResponsiveGridLayout = WidthProvider(Responsive);

const options1 = {
    title: {
        text: 'My chart 1'
    },
    series: [{
        type:'bar',
        data: [1,2,3,4,5,6,7,1,2,3,4,5,6,7,1,2,3,4,5,6,7,1,2,3,4,5,6,7]
    }],

  }

const Blocks = (props) => {

    
    const layout1 = [
        { i: "1", x: 0, y: 0, w: 8, h: 8 },
    ]

   const handleResize = chart => {
    chart.reflow()
   }

    return (
        <div className={styles.blocks}>
            <ResponsiveGridLayout 
                className="layout" 
                layouts={layout1}   
                autoSize={true}
                allow-resize={true}
                isDraggable
                isRearrangeable
                isResizable
                onResizeStop={handleResize}
                breakpoints={{lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0}}
                cols={{lg: 12, md: 10, sm: 6, xs: 4, xxs: 2}} 
             >

                <div className={styles.container} key="1" >
                    <HighchartsReact 
                        containerProps = {{ className: styles.chartContainer }}
                        highcharts = { Highcharts } 
                        options = { options1 }
                        callback = { chart => chart}
                    />
                </div>
            </ResponsiveGridLayout>
        </div>
    )
}

export default Blocks

Answer 1

您可以使用 React useRef鈎子獲取圖表實例：

  const chartComponent = useRef(null);

  const handleResize = () => {
    const chart = chartComponent.current?.chart;
    if (chart) {
      chart.reflow();
    }
  };

  return (
    <HighchartsReact
      ref={chartComponent}
      ...
    />
  );

---

現場演示： https://codesandbox.io/s/highcharts-react-demo-fork-n4y01?file=/demo.jsx

文檔： https://github.com/highcharts/highcharts-react#how-to-get-a-chart-instance