全屏面板 bootstrap 带有高图表（100% 高度）

Question

我有几个 (bootstrap) 面板，我希望有机会显示这个全屏。 Highcharts 图表出现在这些面板中。问题是当您进入全屏模式时，highcharts 的高度不适应，宽度也是如此。是否可以自动调整缩放比例以使比例保持不变？

如果这不可能，我想让图表在高度的中间对齐。

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/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-6 col-md-6 col-xs-6">
      <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" class='fullscreen-btn' 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 class="col-lg-6 col-md-6 col-xs-6">
      <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-fullscreen2" class='fullscreen-btn' 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="container2"></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>

JS

$(document).ready(function() {
var chart1Info = {
  containerId: 'container',
  definition: {
    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]
    }]
  }
};
var chart2Info = {
  containerId: 'container2',
  definition: {
    title: {
      text: 'Chart2 Title'
    },
    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]
    }]
  }
};

function drawChart(chartInfo) {
  // Properties that vary by chart should be defined in chartInfo
  // Any properties that are the same for all charts are added here 
  chartInfo.responsive = {
    rules: [{
      condition: {
        maxWidth: 500
      },
      chartOptions: {
        legend: {
          layout: 'horizontal',
          align: 'center',
          verticalAlign: 'bottom'
        }
      }
    }]
  };
  Highcharts.chart(chartInfo.containerId, chartInfo.definition);
}
//Toggle fullscreen
$(".fullscreen-btn").click(function(e) {
  e.preventDefault();

  var $this = $(this);
  $this.children('i')
    .toggleClass('glyphicon-resize-full')
    .toggleClass('glyphicon-resize-small');
  $(this).closest('.panel').toggleClass('panel-fullscreen');
  var chartInfo = $this.attr("id") === 'panel-fullscreen' ? chart1Info : chart2Info;
  console.log($this.id, chartInfo);
  drawChart(chartInfo);
});
drawChart(chart1Info);
drawChart(chart2Info);
});

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

正如您在 Highcharts 文档中所读：

By default (when null) the height is calculated from the offset height of the containing element, or 400 pixels if the containing element's height is 0.

因此，如果您没有在父元素上指定 width 值，那么您的图表会采用 400px 值并默认设置它。

为了使其符合预期，您需要在所有包含元素上定义任何 CSS height 值。例如：

.col-lg-8.col-md-8.col-xs-8 {
  height: 100%
}
.panel-body {
 height: 94%
}
#container,
#container2 {
  height: 100%
}

实例：https://jsfiddle.net/jx46s9gn/

API参考：https://api.highcharts.com/highcharts/chart.height

全屏面板 bootstrap 带有高图表（100% 高度）

Fullscreen panel bootstrap with highcharts (100% height)

php

css

twitter-bootstrap

highcharts

fullscreen