我有一个页面,分为通过 anchor 访问的部分。
有没有办法让 highcharts 动画在其特定部分变为可见而不是在页面加载时触发?
http://jsfiddle.net/YFMSb/2/ (图表在“技能”下,因此希望在页面的该部分出现时其初始动画发生。不需要在随后访问/通过该部分时重新设置动画)
$(function () {
$('#container').highcharts({
chart: {
type: 'bar',
spacingTop: 0
},
title: {
text: ''
},
xAxis: {
labels: {
enabled: false
}
},
yAxis: {
min: 0,
max: 100,
title: {
text: ''
},
labels: {
enabled: false
}
},
plotOptions: {
series: {
stacking: 'normal'
}
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b>';
}
},
series: [{
name: 'clean',
data: [10],
}, {
name: 'eat',
data: [10]
}, {
name: 'sleep',
data: [40]
}, {
name: 'work',
data: [30]
}, {
name: 'play',
data: [10]
}]
});
});
最佳答案
将滚动事件监听器附加到检测您何时接近 skills
的窗口。部分。创建图表时,请移除滚动监听器以确保图表仅创建一次。这也将有助于提高性能:没有理由收听我们不再响应的事件。
如果用户单击 skills
,此方法也有效。链接在顶部。
你要小心滚动事件,因为它可能是一个真正的性能瓶颈。我拿了approach John Resig 建议定期检查滚动位置。
Working Demo
$(function () {
var $window = $(window),
didScroll = false,
skillsTop = $('#skills').offset().top - 40; //the point at which we will create the chart
$window.on('scroll', function () {
//detected a scroll event, you want to minimize the code here because this event can be thrown A LOT!
didScroll = true;
});
//check every 250ms if user has scrolled to the skills section
setInterval(function () {
if (didScroll) {
didScroll = false;
if ($window.scrollTop() >= skillsTop) {
createChart();
}
}
}, 250);
function createChart() {
$window.off('scroll'); //remove listener that will create chart, this ensures the chart will be created only once
$('#container').highcharts({
//chart configuration here
});
};
});
关于animation - highcharts:在可见而不是在页面加载时触发动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18364088/