Если соотношение сторон было зафиксировано, вы могли бы справиться с этим с помощью атрибута viewbox в svg.Но в этом случае я бы предпочел обернуть отрисовку Highcharts своей собственной функцией и вызывать ее при загрузке и при каждом нажатии кнопки.Это перерисовало бы диаграмму, так что вы не получите такой искаженный / «увеличенный» вид при изменении его размера - вместо этого вы бы нарисовали диаграмму так, чтобы она наилучшим образом соответствовала новому пространству.
Если вам не нравятся переходы перерисовки, у вас может быть функция рисования (выполняется изначально) и функция перерисовки, которая определяется без переходов (выполняется внутри обработчика щелчков # 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>