我有几个（引导程序）面板，我希望有机会展示这个全屏。这些面板中存在Highcharts图表。问题是当您进入全屏模式时，高图表的大小不适应。是否有可能自动调整比例以使比率保持不变？
在this示例中，我已经开始讨论问题。
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;
}
希望有人可以帮助我进一步解决这个问题。非常感谢你。
答案 0 :(得分：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>
答案 1 :(得分：1)
如果纵横比已修复，您可以使用svg上的viewbox属性处理此问题。但在这种情况下，我选择将Highcharts绘制包装在自己的函数中，并在加载时和单击按钮时调用它。这会重绘图表，这样你就不会被扭曲/放大＆＃34;放大＆＃34;看看它何时调整大小 - 相反，你可以将图表绘制为最适合新空间。
如果你不喜欢重绘过渡，你可以有一个绘图功能（最初执行）和一个没有过渡的重绘功能（在＃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>