[英]Anychart animation on scroll event
默認情況下,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:在可見時觸發動畫,而不是在頁面加載時
您可以使用
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/ ,它說明了這個想法。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.