我在页面中使用jQuery animate（）来增加highchart元素的大小。当我调用事件（双击）时，它没有变化。但是，如果按F11（全屏）或F12，它将受到影响。这是我的代码：
$(function() {
var random1 = [];
var random2 = [];
$('#today').dblclick(function() {
$(this).children('.highcharts-container').css("zIndex", 1000);
$(this).animate({
opacity: '1',
width: '1140px',
height: '655px'
}, 800, function() {
alert('OK');
});
});
for (i = 0; i < 1440; i += 10) {
var temp = Math.floor((Math.random() * 250) + 1);
random1.push(temp);
}
for (i = 0; i < 1440; i += 10) {
var temp = Math.floor((Math.random() * 250) + 1);
random2.push(temp);
}
var chart = {
zoomType: 'xy'
};
var today_xAxis = {
type: 'datetime',
tickInterval: 3000000,
labels: {
formatter: function() {
return Highcharts.dateFormat('%kh', this.value);
},
autoRotationLimit: 10,
step: 3
},
};
var today_yAxis = [{ // Primary today_yAxis
min: 0,
max: 250,
tickAmount: 6,
tickInterval: 50,
labels: {
format: '{value}',
style: {
color: Highcharts.getOptions().colors[1]
}
},
title: {
text: 'Température (°C)',
style: {
color: Highcharts.getOptions().colors[1],
fontFamily: 'Trebuchet MS'
}
}
}, { // Secondary today_yAxis
min: 0,
max: 250,
tickAmount: 6,
tickInterval: 50,
title: {
text: 'Température (°C)',
style: {
color: '#7CB5EC',
fontFamily: 'Trebuchet MS'
}
},
labels: {
format: '{value}',
style: {
color: Highcharts.getOptions().colors[0]
}
},
opposite: true
}];
var today_tooltip = {
shared: true
};
var today_legend = {
layout: 'vertical',
align: 'left',
x: 120,
verticalAlign: 'top',
y: 100,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
};
var today_series = [{
name: 'Température (°C)',
type: 'column',
today_yAxis: 1,
data: random1,
pointStart: Date.UTC(2015, 9, 14, 0, 0),
pointInterval: 10 * 60 * 1000,
today_tooltip: {
valueSuffix: ' kWh'
}
}, {
name: 'Température (°C)',
type: 'spline',
data: random2,
pointStart: Date.UTC(2015, 9, 14, 0, 0),
pointInterval: 10 * 60 * 1000,
today_tooltip: {
valueSuffix: 'kWh'
}
}];
var today_json = {};
today_json.chart = chart;
today_json.xAxis = today_xAxis;
today_json.yAxis = today_yAxis;
today_json.title = "";
today_json.tooltip = today_tooltip;
today_json.legend = today_legend;
today_json.series = today_series;
$('#today').highcharts(today_json);
});.block-content {
float: left;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 25px;
margin-right: 10px;
height: 340px;
width: 550px;
text-align: left;
}
.block-content-title {
margin-top: 15px;
margin-bottom: 10px;
display: inline-block;
width: 100%;
height: 35px;
line-height: 35px;
border-bottom: 2px #FFFFFF solid;
font-size: 15pt;
font-family: Comfortaa;
}
.block-content-body div {
height: 290px;
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div class="block-content">
<div class="block-content-body">
<div id="today"></div>
</div>
</div>
</body>
</html>最佳答案
要调整图表大小，应使用chart.setSize（）或chart.reflow（），请参阅API。按F11 / 12后，您将调整浏览器文档的大小（window.resize事件），其结果是在Highcharts setSize（）中内部调用。
Pawel Fus的评论。
关于javascript - jQuery .animate()仅在按F11或F12后受影响，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32624887/