Question

我有一组高图表图表+文字显示在Owl Carousel中。每张幻灯片都包含一个附带文字的图表。

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

我想要做的是让图表动画在视线中被触发以进行绘制，一旦在轮播中前进或滑动。我怎么能做到这一点？

任何建议都将不胜感激！

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

Answer 1

你只能在图表的初始绘制中获得漂亮的动画，这样我就可以使每个图表初始化器成为一个函数，然后在afterAction回调上调用它。

$(".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
        });
    }
});

更新了fiddle。

在猫头鹰旋转木马上查看HighCharts动画

1 个答案: