highcharts：在可见时而不是在页面加载时触发动画 [英] highcharts: fire animation when visible instead of on page load

问题描述

我有一个页面分成了几部分，通过锚点访问。
有没有办法让highcharts动画在其特定部分变为可见而不是在页面加载时触发？

http://jsfiddle.net/YFMSb/2/ （图表在'技能'下，所以想要它的初始动画发生时

  $（（））$（$） （）{
 $（'＃container'）。highcharts（{
 chart：{
 type：'bar'，
 spacingTop：0 
}，
 
标题：{
文本：''
}，
 
 xAxis：{
标签：{
启用：false 
} 
}，
 
 y轴：{
最小：0，
最大：100，
标题：{
 text： ''
}，
标签：{ 
 enabled：false 
} 
}，
 
 plotOptions：{
 series：{
 stacking：'normal'
} 
}，
 
 
 tooltip：{
 formatter：function（）{
 return'< b>'+ this.series.name +' < / b个'; 
 
 
 
系列：[{
 name：'clean'，
 data：[10]，
}，{ 
名称：'eat'，
数据：[10] 
}，{
名称：'sleep'，
数据：[40] 
} ，{
名称：'work'，
 data：[30] 
}，{
名称：'play'，
数据：[10] 
}] 
 
}）; 
}）; 
  

解决方案

将滚动事件侦听器附加到检测你接近技能部分。在创建图表时，请移除滚动侦听器以确保只创建一次图表。这也将有助于表现：没有理由倾听我们不会回应的事件。

如果用户点击顶部的 skill 链接，此方法也可以使用。

您希望小心滚动事件，因为它可能是一个真正的性能瓶颈。我使用John Resig建议的方法定期检查滚动位置。

工作演示

  $（function（）{
 var $ window = $（window），
 didScroll = false，
 skillsTop = $（'＃skills'）。offset（）。top  -  40; //我们将创建图表的位置
 
 $ window.on（'scroll '，function（）{
 //检测到一个滚动事件，你想最小化这里的代码，因为这个事件可以被抛出很多！
 didScroll = true; 
}）; 
 
 //如果用户滚动到技能部分，则每250毫秒检查
 setInterval（function（）{
 if（didScroll）{
 didScroll = false; 
 if（$ window.scrollTop（）> = skillTop）{
 createChart（）; 
 } 
} 
}，250）; 
 
函数createChart（）{
 $ window.off（'scroll'）; //删除将创建图表的监听器，这可以确保图表只会创建一次
 
 $（'＃container'）。highcharts（{
 //图表配置
 }）; 
}; 
}）; 
  

i have a page separated out into sections that are accessed via anchors. is there a way to have the highcharts animation fire when its particular section becomes visible instead of on page load?

http://jsfiddle.net/YFMSb/2/ (the chart is under 'skills', so would like its initial animation to occur when that section of the page is brought up. does not need to re-animate during subsequent visits to/through the section)

$(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]
        }]

    });
});

解决方案

Attach a scroll event listener to the window that detects when you get close to the skills section. When you create the chart, remove the scroll listener to ensure that the chart is only created once. This will also help with performance: no reason to listen to an event that we aren't going to respond to anymore.

This approach also works if the user clicks the skills link at the top.

You want to be careful with the scroll event as it can be a real performance bottleneck. I took the approach suggested by John Resig to check the scroll position at regular intervals.

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
        });
    };
});

这篇关于highcharts：在可见时而不是在页面加载时触发动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！