Resize issue while gridster.js with highcharts

问题

Highcharts inside the gridster widgets not resize automatically when I resize the gridster widgets. When I resize the window, highchart are resized based on the grid sizes. But it should happen automatically when I resize the grid.

Code I tried is below :

<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>

回答1:

According to the Highcharts api, automatic reflow only occurs on window.resize events. You'll have to do this explicitly. I'd simply do it in gridster's 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');

Example fiddle here.

回答2:

you can use 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:

In my case chart.reflow() wasn't good. You can use chart.setSize(width, height)

I have event on resize.stop callback and listener in function responsible for drawing charts which contains:

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

you can also set new height or weight of container:

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

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

来源：https://stackoverflow.com/questions/21811690/resize-issue-while-gridster-js-with-highcharts

标签

javascript

jquery

Highcharts

gridster