如何解决滚动时的Highcharts动画-适用于多种图表类型,但不适用于折线或面积
在浏览网站时,我想为图表图表制作动画。我发现此宝石适用于饼图和柱状图,但不适用于面积图或折线图。当第一个动画平滑播放时,区域图和折线图只是显示而没有动画。
(function (H) {
var pendingRenders = [];
// https://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport/7557433#7557433
function isElementInViewport(el) {
var rect = el.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (
window.innerHeight ||
document.documentElement.clientHeight
) &&
rect.right <= (
window.innerWidth ||
document.documentElement.clientWidth
)
);
}
H.wrap(H.Series.prototype,'render',function deferRender(proceed) {
var series = this,renderTo = this.chart.container.parentNode;
// It is appeared,render it
if (isElementInViewport(renderTo) || !series.options.animation) {
proceed.call(series);
// It is not appeared,halt renering until appear
} else {
pendingRenders.push({
element: renderTo,appear: function () {
proceed.call(series);
}
});
}
});
function recalculate() {
pendingRenders.forEach(function (item) {
if (isElementInViewport(item.element)) {
item.appear();
H.erase(pendingRenders,item);
}
});
}
if (window.addEventListener) {
['DOMContentLoaded','load','scroll','resize']
.forEach(function (eventType) {
addEventListener(eventType,recalculate,false);
});
}
}(Highcharts));
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。