滚动事件上的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：在可见时触发动画，而不是在页面加载时

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/ ，它说明了这个想法。