AmCharts 折線圖動畫

Question

是否可以在 AmCharts 中以顯示正在繪制的線條的方式動畫折線圖（通過連接項目符號或從左到右依次繪制線條）？

我已經使用了startDuration 、 startEffect和sequencedAnimation屬性，但所有選項似乎都將整條線作為一個整體進行動畫處理，要么從頂部向下滑動，要么在進入時將其彈跳。 它比沒有動畫要好，非常適合柱形圖/條形圖，但對於折線圖來說看起來有些奇怪和不自然。

這是 AmCharts 的相關文檔。

Answer 1

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

• 緩出正弦
• 隨心所欲
• 松緊帶
• 彈跳

這些都是反彈或滑動類型的圖表，它們目前還沒有提供您想要的連接點類型的效果。

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/