在highchart中的动画系列

Question

嗨我想创建一个类似这个

的高级图

我创建了一个虚线高图，但不知道如何放这个动画。

$(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 stroke-dashoffset中的to设置为某个负值（假设您希望它从左到右）并在无限上运行动画来实现此目的（假设你也想要那个）。技术主要是learned here。

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

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

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

但是，在进行此操作时，我的CPU使用量似乎有所上升。