滚动事件上的Anychart动画

Question

默认情况下，页面加载时会发生Anychart中的图表动画。当包含图表的div（jsfiddle中的容器4）滚动到视图中时，如何添加只允许图表动画发生的滚动事件侦听器？

的jsfiddle：https://jsfiddle.net/2wbexu15/

          <div style="height:200px; border:1px solid #000;"> 
              Container 1 
              </div> 

              <div style="height:200px; border:1px solid #000;"> 
              Container 2 
              </div> 

              <div style="height:200px; border:1px solid #000;"> 
              Container 3 
              </div> 

              <div id="container4" 
               class="container" 
              style=" 
              height:400px; 
              border:1px solid #000; 
              background:#fff;" 
              > 
              Container 4 
              </div> 

              <div style="height:400px; border:1px solid #000;"> 
              Container 5 
              </div> 

              <div style="height:400px; border:1px solid #000;"> 
              Container 6 
              </div> 

              <script> 
              anychart.onDocumentReady(function() { 

               // set default icons for legend items 
               // for lines, splines and markers 
               anychart.theme({ 
               chart: { 
                defaultSeriesSettings: { 
                 line: {legendItem: {iconType: "line"}}, 
                 spline: {legendItem: {iconType: "spline"}}, 
                 marker: {legendItem: {iconType: "marker"}} 
                }}}); 

               // create a data set 
               var data = anychart.data.set([ 
               ["2012", 13, 21], 
               ["2013", 18, 26], 
               ["2014", 24, 28], 
               ["2015", 22, 30], 
               ["2016", 24, 32] 
               ]); 

               // map the data 
               var seriesData_1 = data.mapAs({x: [0], value: [1]}); 
               var seriesData_2 = data.mapAs({x: [0], value: [2]}); 

               // create a chart 
               chart = anychart.line(); 

               // set the interactivity mode 
               chart.interactivity().hoverMode("single"); 

               // create the first series, set the data and name 
               var series1 = chart.line(seriesData_1); 
               series1.name("Residential Active"); 

               // configure the visual settings of the first series 
               series1.stroke("#2b89e1", 1); 
               series1.hoverStroke("#2b89e1", 2); 
               series1.selectStroke("#2b89e1", 4); 

               // create the second series, set the data and name 
               var series2 = chart.line(seriesData_2); 
               series2.name("Non-Residential Active"); 

               // configure the visual settings of the second series 
               series2.stroke("#a91212", 1); 
               series2.hoverStroke("#a91212", 2); 
               series2.selectStroke("#a91212", 4); 

               // set the titles of the axes 
               var yAxis = chart.yAxis(); 
               yAxis.title("Number of CES"); 

               // make labels visible on chart 
               series1.labels(true); 
               series2.labels(true); 

               // make marker shapes visible on chart 
               series1.markers(true); 
               series2.markers(true); 

               // make legend at top of chart visible 
               chart.legend(true); 

               // set the container id 
               chart.container("container4"); 

               chart.animation(true, 800) 

               // initiate drawing the chart 
               chart.draw(); 
              }); 
              </script> 

到关于Highcharts这个问题类似，但我无法弄清楚如何应用此解决方案Anycharts： highcharts: fire animation when visible instead of on page load

Answer 1

您可以处理窗户滚动带

var scrollHandler = function(e){ 
    if (chart.container().getContainerElement().getBoundingClientRect().top < 50){ 
     window.removeEventListener('scroll',scrollHandler) 
     chart.draw(); 
    } 
}; 
window.addEventListener('scroll', scrollHandler, false); 

看到这个样本：https://jsfiddle.net/2wbexu15/3/，它说明了这个想法。