使用 highcharts 调整 gridster.js 的大小问题答案

【问题标题】：Resize issue while gridster.js with highcharts使用 highcharts 调整 gridster.js 的大小问题
【发布时间】：2014-02-16 13:24:45
【问题描述】：

当我调整 gridster 小部件的大小时，gridster 小部件内的 Highcharts 不会自动调整大小。当我调整窗口大小时，highchart 会根据网格大小调整大小。但是当我调整网格大小时它应该会自动发生。

我试过的代码如下：

<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>GridSter With HighChart</title>
  <link rel="stylesheet" type="text/css" href="http://gridster.net/dist/jquery.gridster.css">
  <link rel="stylesheet" type="text/css" href="http://gridster.net/demos/assets/demo.css">
<body>

  <div class="controls">
      <button class="js-resize-random">Resize random widget</button>
  </div>

  <div class="gridster ready">
    <ul style="height: 520px; width: 550px; position: relative;">
      <li class="gs-w" data-row="1" data-col="1" data-sizex="2" data-sizey="4">
        <div id="container" style="width:100%;margin: 0 auto"></div>
      <span class="gs-resize-handle gs-resize-handle-both"></span></li>
      <li class="gs-w" data-row="1" data-col="3" data-sizex="1" data-sizey="2">1<span class="gs-resize-handle gs-resize-handle-both"></span></li>
      <li class="gs-w" data-row="1" data-col="4" data-sizex="1" data-sizey="1">2<span class="gs-resize-handle gs-resize-handle-both"></span></li>
      <li class="gs-w" data-row="3" data-col="2" data-sizex="3" data-sizey="1">3<span class="gs-resize-handle gs-resize-handle-both"></span></li>
      <li class="gs-w" data-row="1" data-col="5" data-sizex="1" data-sizey="3">9<span class="gs-resize-handle gs-resize-handle-both"></span></li>
    </ul>
  </div>

    <script type="text/javascript" src="http://gridster.net/demos/assets/jquery.js"></script>
    <script src="http://gridster.net/dist/jquery.gridster.js" type="text/javascript" charset="utf-8"></script>

    <script src="http://code.highcharts.com/highcharts.js"></script>
    <script src="http://code.highcharts.com/modules/exporting.js"></script>

    <script type="text/javascript">
        function getRandomInt(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }
    </script>

    <script type="text/javascript">
      var gridster;

      $(function(){

        gridster = $(".gridster ul").gridster({
          widget_base_dimensions: [100, 55],
          widget_margins: [5, 5],
          helper: 'clone',
          resize: {
            enabled: true
          }
        }).data('gridster');


        $('.js-resize-random').on('click', function() {
            gridster.resize_widget(gridster.$widgets.eq(getRandomInt(0, 9)),
                getRandomInt(1, 4), getRandomInt(1, 4))
        });

      });
    </script>

    <script>
    $(function () {
    chart = $('#container').highcharts({
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
        },
        title: {
            text: 'Browser market shares at a specific website, 2010'
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    color: '#000000',
                    connectorColor: '#000000',
                    format: '<b>{point.name}</b>: {point.percentage:.1f} %'
                }
            }
        },
        series: [{
            type: 'pie',
            name: 'Browser share',
            data: [
                ['Firefox',   45.0],
                ['IE',       26.8],
                {
                    name: 'Chrome',
                    y: 12.8,
                    sliced: true,
                    selected: true
                },
                ['Safari',    8.5],
                ['Opera',     6.2],
                ['Others',   0.7]
            ]
        }]
    });
});

    </script>

</body></html>

【问题讨论】：

标签： javascript jquery highcharts gridster

【解决方案1】：

根据Highcharts api，自动回流仅发生在window.resize 事件上。您必须明确地执行此操作。我只需在 gridster 的 resize.stop callback 中进行操作：

gridster = $(".gridster ul").gridster({
      widget_base_dimensions: [100, 55],
      widget_margins: [5, 5],
      helper: 'clone',
      resize: {
        enabled: true,
        stop: function(e, ui, $widget) {
          Highcharts.charts[0].reflow(); // reflow the first chart...
        }
      }
   }).data('gridster');

例如小提琴here。

【讨论】：

【解决方案2】：

你可以使用resize callback

  $(document).ready(function () {
  gridster = $(".gridster ul").gridster({
      widget_base_dimensions: ['auto', 140],
      autogenerate_stylesheet: true,
      min_cols: 1,
      max_cols: 6,
      widget_margins: [5, 5],
      resize: {
          enabled: true,
          resize: function (e, ui, $widget) {
              Highcharts.charts[0].reflow(); // reflow the first chart...
          },
          stop: function(e, ui, $widget) {
              Highcharts.charts[0].reflow(); // reflow the first chart...
            }
      }
  }).data('gridster');
  $('.gridster  ul').css({'padding': '0'});
});

【讨论】：

【解决方案3】：

就我而言，chart.reflow() 并不好。你可以使用chart.setSize(width, height)

我在负责绘制图表的函数中的resize.stop 回调和侦听器上有事件，其中包含：

var height = $('#HighartsContainer').closest("li").height() - 50; //50: margin, padding, etc
var width = $('#HighartsContainer').closest("li").width() - 10;

您还可以设置新的容器高度或重量：

$('#HighartsContainer').css('height', height);

self.chart.setSize(width, height, false);

【讨论】：