Jquery .animate()仅在按下F11或F12后生效
Jquery .animate() only affected after press F11 or F12
我在我的页面中使用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后,你可以调整浏览器的文档(窗口)大小。在Highcharts的结果内部调用setSize()。
Pawel Fus的评论
相关文章:
- 使用ExtJS捕获功能键事件(F1-F12)
- 是否有“”的键盘快捷键;暂停动画”;Chrome开发工具中的功能?(F12)
- 在没有F12工具的情况下恢复Internet Explorer上的javascript日志和错误
- 即首先破坏我的 JS 脚本,然后我按 F12,它工作得很好
- valueOf() 在脚本和 F12 控制台(仅限 Chrome 和 IE11)中给出不同的值
- 如何在 php 中禁用 esc 键、F11 和弹出窗口退出全屏模式
- 如何通过按 F11 调用两个函数
- 如何在正文加载时以全屏模式(F11 功能)打开网页
- 如何绑定“退出全屏f11”浏览器按钮
- 使用 JS 和 F11 键盘键功能的按钮
- IE 10:调试控制台(F12)更改行为
- 有没有办法用脚本打开f12
- 如何在“”中打开新的浏览器窗口;F11”;模式(没有工具栏等)
- Typescript和Chrome调试器(F12工具)
- 如何在浏览器中使用F12控制台在javascript中每隔一段时间执行一次
- 如何在=sign之后在javascript控制台(F12)中将url页面增加一个
- 禁用以显示我的应用程序不工作的控制台(F12可以,但不能禁用CLT+SHFT+I)
- IE11 F12调试器未附加
- 抛出新的错误(字符串)不显示在F12
- Jquery .animate()仅在按下F11或F12后生效