使用GridstackJS在可拖动/可调整大小的面板中的响应高图表

Question

我正在尝试将Highcharts与GridstackJS结合使用，以使我具有可拖动和可调整大小的Panel，其中包含Highcharts中的图表。我遇到的问题是，在调整Grid-Stack-Item的大小时，图表不会增长和收缩。首次初始化时，它们甚至大小都不正确，因此它们总是比面板更大或更小。当我调整面板大小时，是否有办法使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>

CSS

.dragbox{  
  margin: 5px 2px  20px;  
  background: #fff;  
  position: absolute;  
  border: 1px solid #ddd;
  border-radius: 5px;  
  -moz-border-radius: 5px;  
  -webkit-border-radius: 5px;  
}  

.dragbox-header{  
  margin: 0;  
  font-size: 12px;  
  padding: 5px;  
  background: #f0f0f0;  
  color: #000;  
  border-bottom: 1px solid #eee;  
  font-family: Verdana;  
  cursor: move;  
  position: relative;
}  

.dragbox-content{  
  display: block;
  background: #fff;  
  margin:5px;  
  font-family: 'Lucida Grande', Verdana; font-size:0.8em; line-height:1.5em;  
}  

.placeholder{  
  background: lightgray;  
  border: 1px dashed #ddd; 
  border-radius: 5px; 
}

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]
      }]
  });
});

Answer 1

这里是一个JSFiddle示例，尽管我现在无法使可拖动和易变的Gridstack正常工作。但是您会看到Highchart伸出面板的问题。

JSFiddle

see JSFiddle