スクロールイベントのアニメーションアニメーション

Question

デフォルトでは、アニメーションチャートのアニメーションはページの読み込み時に発生します。チャートを含むdiv（jsfiddleのContainer 4）をスクロールして表示するときに、チャートアニメーションのみを発生させるスクロールイベントリスナーを追加するにはどうすればよいですか？

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

Highchartsに関するこの質問に似て

          <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> 

、私は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/、それはアイデアを示しています。