AmCharts折线图动画

Question

是否可以以显示正在绘制的线条的方式为AmCharts中的折线图设置动画（通过连接项目符号或从左到右依次绘制线条）？

我已经使用了startDuration，startEffect和sequencedAnimation属性，但所有选项似乎都为整条线提供了动画效果，可以将其从顶部或在进入时弹跳它。它比没有动画更好，非常适合列/条形图，但对于折线图来说看起来有点奇怪和不自然。

Here is the relevant documentation for AmCharts

Answer 1

如您所链接的文档http://docs.amcharts.com/3/javascriptcharts/AmSerialChart#startEffect所述，目前唯一可用的效果是......

• easeOutSine
• easeInSine
• 弹性
• 反弹

这些都是类型图中的反弹或幻灯片，它们目前不提供您想要的点类型效果的连接。

Answer 2

是的，您可以通过它绘制的方式为您的amchart制作动画。 你用CSS做到了：

#chartdiv{
width       : 100%;
height      : 500px;
}

.amcharts-graph-g1 { //g1 is the id of your graph
  stroke-dasharray: 500%;
  -webkit-animation: am-draw 5s;
  animation: am-draw 5s;
}

@keyframes am-draw {
    0% {
        stroke-dashoffset: 500%;
    }
    100% {
        stroke-dashoffset: 0%;
    }
}

点击此链接：https://www.amcharts.com/demos/css-animations/