无法将highcharts地图重排为全屏

Question

我正在尝试将我的highcharts地图重排为全屏，但它只是以相同的大小回流。我将离开这个例子：http://jsfiddle.net/highcharts/ehk2y49o/

我在回复我要制作全屏的高图对象方面做了同样的事情。我也在示例中设置了父容器。我猜这与地图有关，他们可能不太敏感。

＆＃13;

＆＃13;

$(function() {
  // Load the data from a Google Spreadsheet
  // https://docs.google.com/a/highsoft.com/spreadsheet/pub?hl=en_GB&hl=en_GB&key=0AoIaUO7wH1HwdFJHaFI4eUJDYlVna3k5TlpuXzZubHc&output=html
  Highcharts.data({

    googleSpreadsheetKey: '0AoIaUO7wH1HwdFJHaFI4eUJDYlVna3k5TlpuXzZubHc',

    // custom handler when the spreadsheet is parsed
    parsed: function(columns) {

      // Read the columns into the data array
      var data = [];
      $.each(columns[0], function(i, code) {
        data.push({
          code: code.toUpperCase(),
          value: parseFloat(columns[2][i]),
          name: columns[1][i]
        });
      });


      // Initiate the chart
      var mapChart_views = Highcharts.mapChart('container_map_views', {
        chart: {
          borderWidth: 1
        },
        // overrides somehow even commented out
        colors: ['rgba(216,118,29,0.05)', 'rgba(216,118,29,0.2)', 'rgba(216,118,29,0.4)',
          'rgba(216,118,29,0.5)', 'rgba(216,118,29,0.6)', 'rgba(216,118,29,0.8)', 'rgba(216,118,29,1)'
        ],

        title: {
          text: 'Population density by country (/km²)'
        },

        mapNavigation: {
          enabled: true
        },

        legend: {
          title: {
            text: 'Individuals per km²',
            style: {
              color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
            }
          },
          align: 'left',
          verticalAlign: 'bottom',
          floating: true,
          layout: 'vertical',
          valueDecimals: 0,
          backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || 'rgba(255, 255, 255, 0.85)',
          symbolRadius: 0,
          symbolHeight: 14
        },

        colorAxis: {
          dataClasses: [{
            to: 3,
            color: 'rgba(216,118,29,0.05)'
          }, {
            from: 3,
            to: 10,
            color: 'rgba(216,118,29,0.2)'
          }, {
            from: 10,
            to: 30,
            color: 'rgba(216,118,29,0.4)'
          }, {
            from: 30,
            to: 100,
            color: 'rgba(216,118,29,0.5)'
          }, {
            from: 100,
            to: 300,
            color: 'rgba(216,118,29,0.6)'
          }, {
            from: 300,
            to: 1000,
            color: 'rgba(216,118,29,0.8)'
          }, {
            from: 1000,
            color: 'rgba(216,118,29,1)'
          }]
        },

        series: [{
          data: data,
          mapData: Highcharts.maps['custom/world'],
          joinBy: ['iso-a2', 'code'],
          animation: true,
          name: 'Population density',
          states: {
            hover: {
              color: '#a4edba'
            }
          },
          tooltip: {
            valueSuffix: '/km²'
          }
        }]
      });
    },
    error: function() {
      $('#container').html('<div class="loading">' +
        '<i class="icon-frown icon-large"></i> ' +
        'Error loading data from Google Spreadsheets' +
        '</div>');
    }
  });

  $('#full-screen-btn').bind('mousedown', function() {
    $('.container_map_views_container').toggleClass('modal');
    $('#container_map_views').highcharts().reflow();
  });

  $('#container_map_views').bind('mousedown', function() {
    $('.container_map_views_container').toggleClass('modal');
    $('#container_map_views').highcharts().reflow();
  });
});

＆＃13;

.modal {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  margin-left: auto;
  background: rgba(0, 0, 0, 0.7);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Maps -->
<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/maps/modules/data.js"></script>
<script src="https://code.highcharts.com/mapdata/custom/world.js"></script>
<!-- Map multiple data classes -->
<div class="container_map_views_container">
  <div id="container_map_views">
    <i class="icon-spinner icon-spin icon-large"></i> Loading data from Google Spreadsheets...
  </div>
  <button id="full-screen-btn">Full Screen</button>
</div>

＆＃13;

＆＃13;

＆＃13;