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

My fiddle link is http://jsfiddle.net/puuqbo6n/

- vandy

---

fiddle链接是http://jsfiddle.net/puuqbo6n/。 - vandy

你想让图表像这样运行吗？ - shv22

是的，我想要相同的动画。 - vandy

这不是Highcharts开箱即用的功能。不过这很有趣。 - wergeld

Answer 1

CSS动画可以通过在@keyframes的to中设置stroke-dashoffset为负值（假设您希望它从左到右移动）并在无限循环中运行动画来实现此目的（假设您也希望如此）。技术大部分是从这里学到的。

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

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

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

然而，在这个过程中，我的CPU使用率似乎提高了。

- Max Starkenburg