javascript - スクロールイベントの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