highchart中的动画系列[关闭]答案

【问题标题】：Animated series in highchart [closed]highchart中的动画系列[关闭]
【发布时间】：2016-05-11 06:33:09
【问题描述】：

嗨，我想创建一个像这样的高图

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

$(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/

【问题讨论】：

小提琴链接是jsfiddle.net/puuqbo6n
你想让图表像这样运行吗？？
是的，我想要同样的动画
这不是 highcharts 开箱即用的东西。不过，这很有趣。

标签： javascript jquery charts highcharts

【解决方案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 使用率似乎上升了。

【讨论】：