動畫系列highchart

Question

您好我想創建這樣

我創建了一個虛線highchart一個highchart，但不知道如何把這個動畫。

$(function() { 
    $('#container').highcharts({ 


     series: [{ 
      data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4], 
      color: '#FF0000', 
      dashStyle: 'dash' 
     }] 
    }); 
}); 

我的小提琴鏈接http://jsfiddle.net/puuqbo6n/

Answer 1

CSS動畫可以通過設置@keyframes to一些負值stroke-dashoffset做到這一點（假設你希望它去左到右）和運行動畫無限（假設你也是這樣）。技術主要爲learned here。

.highcharts-series path { 
    animation: dash 5s linear infinite; 
} 

@keyframes dash { 
    to { 
    stroke-dashoffset: -100; 
    } 
} 

http://jsfiddle.net/puuqbo6n/3/

然而，這方面的工作，同時，我的CPU使用率似乎上去。