1

我有一组显示在 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/

4

1 回答 1

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
        });
    }
});

更新了小提琴。

于 2014-09-14T14:13:24.373 回答