我设法使用HighchartsReact从网格中绘制一些值到市场深度图。问题是，有出价和要求值的数组不断更新，目前我没有在我的图表中反映这一点，除非我刷新页面。
我的代码如下所示：

class MarketDepth extends React.Component<Props, State> {

   ...

    chart = null;

    state = {
        selectedBid: null,
        selectedAsk: null,
    };

    chartOptions = {
        chart: {
            type: 'area',
            zoomType: 'xy',
        },

        title: {
            text: 'Market Depth Chart',
            style: {
                color: '#FFFFFF',
                fontSize: '20px',
                lineHeight: '120%',
                fontWeight: '600',
            },
        },
        xAxis: {
            minPadding: 0,
            maxPadding: 0,
            crosshair: true,
            lineWidth: 0,
            gridLineWidth: 0,
            tickLength: 4,
            plotLines: [
                {
                    color: '#FFFFFF',
                    width: 1,
                    value: this.getAverageLine(), // set the actual price line value
                    label: {
                        text: 'Actual price',
                        rotation: 90,
                        align: 'right',
                        style: {
                            fonstStyle: 'italic',
                        },
                    },
                },
            ],
            title: {
                text: 'Price',
            },
        },
        yAxis: [
            {
                crosshair: true,
                lineWidth: 0,
                gridLineWidth: 0,

                title: {
                    text: 'Acc',
                },
                tickWidth: 1,
                tickLength: 5,
                tickPosition: 'inside',
                labels: {
                    align: 'left',
                    x: 8,
                },
            },
            {
                opposite: true,
                linkedTo: 0,
                lineWidth: 0,
                gridLineWidth: 0,
                title: {
                    text: 'Acc',
                },
                tickWidth: 1,
                tickLength: 5,
                tickPosition: 'inside',
                labels: {
                    align: 'right',
                    x: -8,
                },
            },
        ],
        legend: {
            enabled: false,
        },
        plotOptions: {
            area: {
                states: {
                    hover: {
                        enabled: false,
                        lineWidthPlus: 0,
                    },
                    inactive: {
                        opacity: 1,
                    },
                },
                marker: { enabled: false },
                fillOpacity: 0.2,
                lineWidth: 1,
                step: 'center',
            },
        },
        tooltip: {
            headerFormat: '<span style="font-size=10px;">Price: {point.key}</span><br/>',
            valueDecimals: 2,
        },
        series: [
            {
                name: 'Bids',
                data: this.getBidOrders(),
                step: 'left',
            },
            {
                name: 'Asks',
                data: this.getAskOrders(),
                color: '#fc5857',
                step: 'right',
            },
        ],
    };

    getBidOrders() {
        ...
    }

    getAskOrders() {
        ... 
    }

   ...

   render() {

   return {
              <div id='chartContainer'>
                    <HighchartsReact
                        highcharts={Highcharts}
                        options={this.chartOptions}
                        allowChartUpdate
                    />
              </div>
          }

}

getAskOrders（）和getBidOrder（）方法返回的数组看起来像这样，可以更大或更小，具体取决于需要绘制的内容：

[
    [
        2179.25,
        30
    ],
    [
        2179,
        70
    ],
    [
        2178.75,
        113
    ],
    [
        2178.5,
        159
    ],
    [
        2178.25,
        206
    ]
]

Highcharts库：https://www.highcharts.com/docs/stock/depth-chart
看起来像这样：https://codepen.io/pen
一些我尝试过的东西，可能值得一看：

• 使用React useState钩子来管理chartOptions的状态。
• 使用chartOptions中的events属性更新图表值