当前位置: 动力学知识库 > 问答 > 编程问答 >

jquery - Trigger HighCharts Animation on View in Owl Carousel

问题描述:

I have a set of high charts graphs + text that is displayed inside Owl Carousel. Each slide contains a graph with accompanying text.

<div class="owl-carousel">

<div class="owl-item">

<div id="graph1" style="margin: 25px auto 5px; width: 280px; height: 160px"></div>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sed sollicitudin nibh. Praesent congue libero est, ultricies finibus nisl sollicitudin quis. Nulla pretium suscipit nunc, eget varius neque dapibus eu. Nunc eu sagittis ante, vel faucibus nulla.</p>

</div>

<div class="owl-item">

<div id="graph2" style="margin: 25px auto 5px; width: 280px; height: 160px"></div>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sed sollicitudin nibh. Praesent congue libero est, ultricies finibus nisl sollicitudin quis. Nulla pretium suscipit nunc, eget varius neque dapibus eu. Nunc eu sagittis ante, vel faucibus nulla.</p>

</div>

<div class="owl-item">

<div id="graph3" style="margin: 25px auto 5px; width: 280px; height: 160px"></div>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sed sollicitudin nibh. Praesent congue libero est, ultricies finibus nisl sollicitudin quis. Nulla pretium suscipit nunc, eget varius neque dapibus eu. Nunc eu sagittis ante, vel faucibus nulla.</p>

</div>

</div>

What I would like to do is have the chart animation triggered to draw when it is in view, once advanced or swiped in the carousel. How could I make this happen?

Any suggestions would be appreciated!

JSFiddle: http://jsfiddle.net/trenholm/dq43y537/

网友答案:

You can only really get the nice animation on the initial draw of a chart so I would make each chart initializer a function and then call it on the afterAction callback.

$(".owl-carousel").owlCarousel({
    items: 1,
    navigation:true,
    margin: 50,
    afterAction: function(){
        $.each(this.visibleItems, function(_,idx){
           var chart = $('#graph' + (idx + 1)).highcharts();
           if (chart) chart.destroy(); // if old chart destroy
           chartDraw[idx](); // recreate
        });
    }
});

Updated fiddle.

分享给朋友:
您可能感兴趣的文章:
随机阅读: