draggable/resizable 面板内的响应式 Highchart 使用 GridstackJS

Question

我正在尝试将 Highcharts 与 GridstackJS 结合使用，以便我拥有包含来自 Highcharts 的图表的可拖动和可调整大小的面板。我遇到的问题是，当我调整 Grid-Stack-Item 的大小时，图表不会变大和变小。当它们第一次被初始化时，它们的大小甚至都不正确，所以它们总是比面板大或小。有没有办法让 Highcharts 适合面板，并在我调整面板大小时调整图表大小？

JSFiddle

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

您需要设置图表容器的高度并在change事件函数中调用reflow方法：

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

    chart.reflow();
});

现场演示： https://jsfiddle.net/BlackLabel/rndx0j9s/

API参考：https://api.highcharts.com/class-reference/Highcharts.Chart#reflow

文档： https://github.com/gridstack/gridstack.js/tree/develop/doc#events

draggable/resizable 面板内的响应式 Highchart 使用 GridstackJS

Responsive Highchart within draggable/resizable Panels using GridstackJS

html

javascript

css

highcharts

gridstack