带高图的全屏面板引导程序（响应式）

Question

我有几个（引导程序）面板，我希望有机会在全屏显示。 这些面板中显示高图图表。 问题在于，当您进入全屏模式时，高图表的大小无法适应。 是否可以自动调整缩放比例，使比例保持不变？

在此示例中，我开始了可以看到问题的地方。

的HTML

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<!------ Include the above in your HEAD tag ---------->

<div class="container">
  <div class="row">
    <div class="col-lg-8 col-md-8 col-xs-8">
      <h2>Fullscreen toggle</h2>
      <div class="panel panel-default">
        <div class="panel-heading">
          <h3 class="panel-title">Panel title</h3>
          <ul class="list-inline panel-actions">
            <li><a href="#" id="panel-fullscreen" role="button" title="Toggle fullscreen"><i class="glyphicon glyphicon-resize-full"></i></a></li>
          </ul>
        </div>
        <div class="panel-body">
          <div class="col-lg-8 col-md-8 col-xs-8">
            <div id="container"></div>
          </div>
          <div class="col-lg-4 col-md-4 col-xs-4">
            <h6>Lorem ipsum dolor sit amet, et sit eros molestiae aliquando, habemus intellegat ut vix. Mea prima vituperata at, his enim dicat verterem cu. Vis vivendo consulatu adversarium in, quo cu iisque percipitur. Ne vix apeirian menandri sensibus,
              ea eos probo libris efficiendi, sed no elit etiam scripta. Has an justo semper impedit, diam epicurei percipitur at sed.</h6>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

的JavaScript

$(document).ready(function() {
  //Toggle fullscreen
  $("#panel-fullscreen").click(function(e) {
    e.preventDefault();

    var $this = $(this);

    if ($this.children('i').hasClass('glyphicon-resize-full')) {
      $this.children('i').removeClass('glyphicon-resize-full');
      $this.children('i').addClass('glyphicon-resize-small');
    } else if ($this.children('i').hasClass('glyphicon-resize-small')) {
      $this.children('i').removeClass('glyphicon-resize-small');
      $this.children('i').addClass('glyphicon-resize-full');
    }
    $(this).closest('.panel').toggleClass('panel-fullscreen');
  });
});



Highcharts.chart('container', {

  title: {
    text: 'Solar Employment Growth by Sector, 2010-2016'
  },

  subtitle: {
    text: 'Source: thesolarfoundation.com'
  },

  yAxis: {
    title: {
      text: 'Number of Employees'
    }
  },
  legend: {
    layout: 'vertical',
    align: 'right',
    verticalAlign: 'middle'
  },

  plotOptions: {
    series: {
      label: {
        connectorAllowed: false
      },
      pointStart: 2010
    }
  },

  series: [{
    name: 'Installation',
    data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
  }, {
    name: 'Manufacturing',
    data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
  }, {
    name: 'Sales & Distribution',
    data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
  }, {
    name: 'Project Development',
    data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
  }, {
    name: 'Other',
    data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
  }],

  responsive: {
    rules: [{
      condition: {
        maxWidth: 500
      },
      chartOptions: {
        legend: {
          layout: 'horizontal',
          align: 'center',
          verticalAlign: 'bottom'
        }
      }
    }]
  }

});

的CSS

.panel-actions {
  margin-top: -20px;
  margin-bottom: 0;
  text-align: right;
}

.panel-actions a {
  color: #333;
}

.panel-fullscreen {
  display: block;
  z-index: 9999;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  overflow: auto;
}

希望有人可以在这方面进一步帮助我。 非常感谢你。

Answer 1

那是你想要的吗？

 $(document).ready(function() { //Toggle fullscreen $("#panel-fullscreen").click(function(e) { e.preventDefault(); var $this = $(this); if ($this.children('i').hasClass('glyphicon-resize-full')) { $this.children('i').removeClass('glyphicon-resize-full'); $this.children('i').addClass('glyphicon-resize-small'); } else if ($this.children('i').hasClass('glyphicon-resize-small')) { $this.children('i').removeClass('glyphicon-resize-small'); $this.children('i').addClass('glyphicon-resize-full'); } $(this).closest('.panel').toggleClass('panel-fullscreen'); }); }); Highcharts.chart('container', { title: { text: 'Solar Employment Growth by Sector, 2010-2016' }, subtitle: { text: 'Source: thesolarfoundation.com' }, yAxis: { title: { text: 'Number of Employees' } }, legend: { layout: 'vertical', align: 'right', verticalAlign: 'middle' }, plotOptions: { series: { label: { connectorAllowed: false }, pointStart: 2010 } }, series: [{ name: 'Installation', data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175] }, { name: 'Manufacturing', data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434] }, { name: 'Sales & Distribution', data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387] }, { name: 'Project Development', data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227] }, { name: 'Other', data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111] }], responsive: { rules: [{ condition: { maxWidth: 500 }, chartOptions: { legend: { layout: 'horizontal', align: 'center', verticalAlign: 'bottom' } } }] } }); 

 .panel-actions { margin-top: -20px; margin-bottom: 0; text-align: right; } .panel-actions a { color: #333; } .panel-fullscreen { display: block; z-index: 9999; position: fixed; width: 100%; height: 100%; top: 0; right: 0; left: 0; bottom: 0; overflow: auto; } .panel-fullscreen .highcharts-container { width: 100% !important; height: 100% !important; } .panel-fullscreen .highcharts-container, .panel-fullscreen .highcharts-root { width: 100% !important; height: 100% !important; } 

 <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"> <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script> <script src="https://code.highcharts.com/stock/highstock.js"></script> <script src="https://code.highcharts.com/stock/modules/exporting.js"></script> <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-lg-8 col-md-8 col-xs-8"> <h2>Fullscreen toggle</h2> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">Panel title</h3> <ul class="list-inline panel-actions"> <li><a href="#" id="panel-fullscreen" role="button" title="Toggle fullscreen"><i class="glyphicon glyphicon-resize-full"></i></a></li> </ul> </div> <div class="panel-body"> <div class="col-lg-8 col-md-8 col-xs-8"> <div id="container"></div> </div> <div class="col-lg-4 col-md-4 col-xs-4"> <h6>Lorem ipsum dolor sit amet, et sit eros molestiae aliquando, habemus intellegat ut vix. Mea prima vituperata at, his enim dicat verterem cu. Vis vivendo consulatu adversarium in, quo cu iisque percipitur. Ne vix apeirian menandri sensibus, ea eos probo libris efficiendi, sed no elit etiam scripta. Has an justo semper impedit, diam epicurei percipitur at sed.</h6> </div> </div> </div> </div> </div> </div> 

Answer 2

如果宽高比是固定的，则可以使用svg上的viewbox属性来处理。 但是在这种情况下，我选择将Highcharts绘图包装在其自己的函数中，并在加载时以及单击按钮时调用它。 这将重新绘制图表，以便在调整大小时不会出现扭曲/“放大”的外观-相反，您将绘制出最适合新空间的图表。

如果您不喜欢重绘过渡，则可以有一个draw函数（最初执行）和一个没有过渡定义的重绘函数（在＃panel-fullscreen点击处理程序中执行）。

仅通过调整大小，您常常会遇到重叠的刻度线/形状，这可以通过在新空间中按比例缩放来避免。

 $(document).ready(function() { //Toggle fullscreen $("#panel-fullscreen").click(function(e) { e.preventDefault(); var $this = $(this); if ($this.children('i').hasClass('glyphicon-resize-full')) { $this.children('i').removeClass('glyphicon-resize-full'); $this.children('i').addClass('glyphicon-resize-small'); } else if ($this.children('i').hasClass('glyphicon-resize-small')) { $this.children('i').removeClass('glyphicon-resize-small'); $this.children('i').addClass('glyphicon-resize-full'); } $(this).closest('.panel').toggleClass('panel-fullscreen'); drawChart(); }); }); drawChart(); function drawChart() { Highcharts.chart('container', { title: { text: 'Solar Employment Growth by Sector, 2010-2016' }, subtitle: { text: 'Source: thesolarfoundation.com' }, yAxis: { title: { text: 'Number of Employees' } }, legend: { layout: 'vertical', align: 'right', verticalAlign: 'middle' }, plotOptions: { series: { label: { connectorAllowed: false }, pointStart: 2010 } }, series: [{ name: 'Installation', data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175] }, { name: 'Manufacturing', data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434] }, { name: 'Sales & Distribution', data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387] }, { name: 'Project Development', data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227] }, { name: 'Other', data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111] }], responsive: { rules: [{ condition: { maxWidth: 500 }, chartOptions: { legend: { layout: 'horizontal', align: 'center', verticalAlign: 'bottom' } } }] } }); } 

 .panel-actions { margin-top: -20px; margin-bottom: 0; text-align: right; } .panel-actions a { color: #333; } .panel-fullscreen { display: block; z-index: 9999; position: fixed; width: 100%; height: 100%; top: 0; right: 0; left: 0; bottom: 0; overflow: auto; } 

 <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"> <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script> <script src="https://code.highcharts.com/stock/highstock.js"></script> <script src="https://code.highcharts.com/stock/modules/exporting.js"></script> <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-lg-8 col-md-8 col-xs-8"> <h2>Fullscreen toggle</h2> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">Panel title</h3> <ul class="list-inline panel-actions"> <li><a href="#" id="panel-fullscreen" role="button" title="Toggle fullscreen"><i class="glyphicon glyphicon-resize-full"></i></a></li> </ul> </div> <div class="panel-body"> <div class="col-lg-8 col-md-8 col-xs-8"> <div id="container"></div> </div> <div class="col-lg-4 col-md-4 col-xs-4"> <h6>Lorem ipsum dolor sit amet, et sit eros molestiae aliquando, habemus intellegat ut vix. Mea prima vituperata at, his enim dicat verterem cu. Vis vivendo consulatu adversarium in, quo cu iisque percipitur. Ne vix apeirian menandri sensibus, ea eos probo libris efficiendi, sed no elit etiam scripta. Has an justo semper impedit, diam epicurei percipitur at sed.</h6> </div> </div> </div> </div> </div> </div>