GridStack集成Highcharts时reflow失效及渲染异常问题求助

我正尝试将Highcharts嵌入GridStack组件，使其支持拖拽与调整大小。目前已通过原生JavaScript成功渲染，但使用jQuery渲染时出现错误。

以下是我的代码：

var options = { // put in gridstack options here
disableOneColumnMode: true, // for jfiddle small window size
float: false,
placeholderClass: "placeholder"

};
var grid = GridStack.init(options);
        
var chart = Highcharts.chart('testChart', {
    chart: {
        animation: false,
        type: 'bar'
    },
    plotOptions: {
        series: {
            animation: false,
        }
    },
    title: {
        text: 'Fruit Consumption'
    },
    xAxis: {
        categories: ['Apples', 'Bananas', 'Oranges']
    },
    yAxis: {
        title: {
            text: 'Fruit eaten'
        }
    },
    series: [{
        name: 'Jane',
        data: [1, 0, 4]
    }, {
        name: 'John',
        data: [5, 7, 3]
    }]
});

document.querySelector('.grid-stack').addEventListener('change', function(event, items) {
    var chartContainer = chart.renderTo;
    document.querySelector(chartContainer).css(
        'height',
        document.querySelector(chartContainer.parentElement).height() - document.querySelector('#testChartHeader').height()
    );

    chart.reflow();
});

我参考过一些JSFiddle示例，但无论是jQuery的问题还是reflow功能都无法解决。我尝试全用JavaScript实现图表与网格的渲染，但图表仍无法正常显示。

内容的提问来源于stack exchange，提问作者fujilar