如何强制正常工作 显示：无样式的高图表。如果图表最初是不可见的（显示：无），则在它变得可见（显示：块）后 - 其大小设置不正确。
https://jsfiddle.net/0we2u4qg example of incorrect chart's size
如何解决？
<!DOCTYPE HTML>
<html lang = "ru">
<head>
<meta charset = "utf-8">
<meta http-equiv = "X-UA-Compatible" content = "IE=edge" />
<script src = "http://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src = "http://code.highcharts.com/highcharts.js"></script>
<script src = "http://code.highcharts.com/modules/exporting.js"></script>
<style>
.info {
position: absolute;
left: 50%;
top: 50%;
color: #f0f0f0;
font-weight: 700;
font-size: 24px;
font-family: 'calibri';
}
.chart {
display: none;
position: absolute;
left: 50px;
top: 50px;
width: 200px;
height: 200px;
margin: 0px;
padding: 0px;
border: 2px solid #bb0000;
}
.chart .container {
width: 100%;
height: 100%;
background-color: #bbbb00;
}
</style>
</head>
<body>
<div class = "info">CLICK ANYWHERE</div>
<div class = "chart"><div class = "container"></div></div>
<script>
(function ($)
{
$('.container').highcharts({
xAxis: {
categories: [10, 20, 30, 40, 50,],
},
plotOptions: {
series: {
animation: false
},
},
series: [
{
type: 'column',
data: [1, 2, 3, 4, 5,],
},
{
type: 'column',
data: [5, 4, 3, 2, 1,],
},
]
});
$(window).click(function(){
$('.info').hide();
$('.chart').show();
});
}(jQuery));
</script>
</body>
</html>
可以在 .show() 之后调用chart.reflow()，因此您的图表将调整为其容器的大小。
示例：https://jsfiddle.net/0we2u4qg/8/
...
$('.info').click(function() {
$('.info').hide();
$('.chart').show();
$('#container').highcharts().reflow(); //added call
});
在 javascript 中添加此函数：
$(function() {
$('.chart')
.hide();
});
并在 CSS 中使用display: block;。