Javascript 使用GridstackJS在可拖动/可调整大小的面板内响应Highchart

我正在尝试实现Highcharts与GridstackJS的结合，这样我就有了包含Highcharts图表的可拖动和可调整大小的面板。 我遇到的问题是，当我调整网格堆栈项的大小时，图表不会增长和收缩。 他们甚至没有正确的大小，当他们第一次被初始化，所以他们总是更大或更小的面板。 是否有一种方法可以使Highcharts适合面板，并在调整面板大小时调整图表的大小

HTML

<div class="row">
    <div class="col-sm-12">
        <div class="grid-stack ui-droppable">
            <div class="dragbox grid-stack-item ui-draggable ui-resizable" data-gs-id="draggable">
                <h2 class="dragbox-header">Chart 1</h2>  
                <div class="dragbox-content" >
                    <div class="text-center"> Item 1</div>
                </div>  
            </div>  
            <div class="dragbox grid-stack-item ui-draggable ui-resizable" data-gs-id="draggable">
                <h2 class="dragbox-header">Chart 2</h2>  
                <div class="dragbox-content" ></div>  
            </div>  
            <div class="dragbox grid-stack-item ui-draggable ui-resizable" data-gs-id="draggable" data-gs-width="4" data-gs-height="3">
                <h2 class="dragbox-header">Chart 3</h2>
                <div class="text-center" id="testChart"></div>
            </div>  
        </div>
    </div>
</div>

JavaScript

$(function () {
    var options = {
        draggable: {handle: '.dragbox-header', scroll: false, appendTo: 'body'},
        placeholderClass: "placeholder",
        acceptWidgets: true,
        cellHeight: 60,
    };
    $('.grid-stack').gridstack(options);
}

var myChart;

document.addEventListener('DOMContentLoaded', function () {
  myChart = Highcharts.chart('testChart', {
      chart: {
          type: 'bar'
      },
      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]
      }]
  });
});

---

您需要设置图表容器的高度，并在

change

事件函数中调用

reflow

方法：

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

    chart.reflow();
});

---

现场演示：

API参考：

---

文档：

嗨@BrOsCoRe，你能在一些在线代码编辑器中重现这个问题吗？您可以从：@ppotaczek update设置JSFIDLE使网格堆栈正常工作您需要直接在图表容器上设置维度：@ppotaczek确定，在调整面板大小时是否有方法调整/更新它们，使其始终适合JSFIDLE？在JSFIDLE中看起来非常好。明天我将尝试以这种方式实施它。谢谢你的帮助和建议。

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

    chart.reflow();
});