javascript - AmCharts 折线图动画

Question

是否可以在 AmCharts 中以动画方式显示正在绘制的线(通过连接项目符号或从左到右顺序绘制线)？

我已经尝试过 startDuration、startEffect 和 sequencedAnimation 属性，但所有选项似乎都将整条线动画化为整个，要么从顶部滑下，要么在进入时弹起。它比没有动画要好，并且非常适合柱形图/条形图，但对于折线图来说它看起来有点奇怪和不自然。

Here is the relevant documentation for AmCharts .

Answer 1

是的，您可以按照绘制的方式为 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/