AmCharts折线图动画

AmCharts line chart animation

本文关键字：动画 折线图 AmCharts      更新时间：2023-09-26

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

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

这是AmCharts的相关文档。

是的，您可以按照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/

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

  • easeOutSine
  • easeInSine
  • 弹性的
  • 反弹

这些都是反弹或滑入型图，它们目前还没有提供你想要的连接点类型的效果。

相关文章：