AmCharts 折线图动画答案

【问题标题】：AmCharts line chart animationAmCharts 折线图动画
【发布时间】：2014-10-06 18:10:11
【问题描述】：

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

我玩过startDuration、startEffect 和sequencedAnimation 属性，但所有选项似乎都使整条线作为一个整体动画，要么从顶部向下滑动，要么在进入时反弹。它比没有动画要好，非常适合柱形图/条形图，但对于折线图来说看起来有些奇怪和不自然。

Here is the relevant documentation for AmCharts.

【问题讨论】：

标签： javascript animation amcharts

【解决方案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/

【讨论】：

【解决方案2】：

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

easeOutSine
easeInSine
弹性
弹跳

这些都是弹跳或滑动类型图表，它们目前不提供您想要的加入点类型效果。

【讨论】：