highcharts动画多个图表

Question

嗨我要在一个页面上有很多图表，都建立在highcharts js上。但是当我到达页面上的一个部分时，我希望图表的动画开始。

我已经设置了一些测试，但我只能制作一个图表动画。为什么图表2不是动画？

<div class="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> 
<div class="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> 

$(function() { 
var test = 
    [ 
     { 
      name: 'Firefox', 
      y: 45.0 
     }, 
     { 
      name: 'IE',  
      y: 26.8 
     }, 
     { 
      name: 'Chrome', 
      y: 12.8, 
      sliced: true, 
      selected: true 
     }, 
     { 
      name: 'Safari',  
      y: 8.5 
     }, 
     { 
      name: 'Opera',  
      y: 6.2 
     }, 
     { 
      name: 'Others', 
      y: 0.7 
     } 
    ]; 

$('.container').each(function() { 

    $(this).highcharts({ 
     chart: { 
      plotBackgroundColor: null, 
      plotBorderWidth: null, 
      plotShadow: false 
     }, 
     title: { 
      text: 'Browser market shares at a specific website, 2010' 
     }, 
     tooltip: { 
      pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' 
     }, 
     plotOptions: { 
      pie: { 
       allowPointSelect: true, 
       cursor: 'pointer', 
       dataLabels: { 
        enabled: true, 
        color: '#000000', 
        connectorColor: '#000000', 
        format: '<b>{point.name}</b>: <br /> {point.percentage:.1f} %' 
       } 
      } 
     }, 
     series: [{ 
      type: 'pie', 
      name: 'Browser share', 
      data: test, 
      animation : false 
     }] 
    }); 
}) 


var chart = $('.container').highcharts(), 
     s = chart.series, 
     sLen = s.length; 

setTimeout(function() {  
    for(var i =0; i < sLen; i++){ 
     s[i].update({ 
      animation: true 
     }, false); 
    } 
    chart.redraw(); 
}, 1000); 

}）;

http://jsfiddle.net/RtxvB/

Answer 1

它通过使用$(".container").highcharts()这仅返回的第一个图表造成的。取而代之的是创建例如一系列图表，在哪里存储，然后你可以简单地访问它们。参见：http://jsfiddle.net/RtxvB/1/

var test = [{ 
    name: 'Firefox', 
    y: 45.0 
}, { 
    name: 'IE', 
    y: 26.8 
}, { 
    name: 'Chrome', 
    y: 12.8, 
    sliced: true, 
    selected: true 
}, { 
    name: 'Safari', 
    y: 8.5 
}, { 
    name: 'Opera', 
    y: 6.2 
}, { 
    name: 'Others', 
    y: 0.7 
}]; 


var charts = [] 
$('.container').each(function() { 

    charts.push(new Highcharts.Chart({ 
     chart: { 
      renderTo: this 
     }, 
     series: [{ 
      type: 'pie', 
      name: 'Browser share', 
      data: test, 
      animation: false 
     }] 
    })); 
}) 

$(charts).each(function (ind, chart) { 
    var s = chart.series, 
     sLen = s.length; 
    setTimeout(function() { 
     for (var i = 0; i < sLen; i++) { 
      s[i].update({ 
       animation: true 
      }, false); 
     } 
     chart.redraw(); 
    }, 1000); 
});