可以对 Highchart 网络图中节点之间的线进行动画处理吗？

Question

我想使用 HighCharts.js 创建一个网络图，它可以绘制网络，并为任何关闭的服务器创建闪烁节点，还可以通过动画某些节点之间的虚线来动画网络流量。

我几乎已经一切正常了。闪烁的节点有效，并且我已经将虚线放置到位。我唯一缺少的是“动画”虚线。这可能吗？

这是我几乎可以工作的示例：

```
https://jsfiddle.net/gouldtv/q0jnkw73/1/
```

阅读完 highcharts 文档后，似乎虚线可以呈现为“dashDotDot”和“dot”以及其他几种样式 - - - 也许通过在这些样式之间交替，它看起来像是一条动画线？但是，我似乎无法让 dashStyle 属性动态刷新。看一下计时器代码和仪表板样式的更改。只是因为某些原因不想更新。

另一个想法也许是以某种方式将带有 className 的“区域”应用于一条线，然后使用 css 关键帧对虚线进行动画处理。我也尝试过，但没有运气。

非常感谢任何建议。

Answer 1

代替使用

update

方法，直接对SVG元素进行操作更加高效灵活。例如，您可以更改

stroke-dashoffset

样式来实现动画效果。

例如：

    setInterval(function() {
      for (j = 0; j < chart.series[0].nodes.length; j++) {

        let node = chart.series[0].nodes[j];

        if (node.color == 'red') {
          node.linksTo[0].graphic.css({
            'stroke-dashoffset': 1
          });
          ...
        } else {
          if (node.color == 'yellow') {
            node.linksTo[0].graphic.css({
              'stroke-dashoffset': 3
            });
            ...
          }
        }
      }
    }, 500)

---

现场演示：https://jsfiddle.net/BlackLabel/b37n6gf8/

API 参考： https://api.highcharts.com/class-reference/Highcharts.SVGElement#css