AmCharts line chart animation

Question

Возможно ли анимировать линейную диаграмму в AmCharts способом, который показывает линию, нарисованную (либо путем соединения патронов, либо путем линейной линии слева направо)?

Я играл со свойствами startDuration, startEffect и sequencedAnimation, но все варианты, кажется, чтобы оживить всю линию в целом, либо вставив его сверху вниз или подпрыгивая его при входе. Это лучше, чем отсутствие анимации, и идеально подходит для столбцов/столбцов, но для линейного графика это выглядит несколько странно и неестественно.

Here is the relevant documentation for AmCharts.

Answer 1

Как указано в документации, вы связаны, http://docs.amcharts.com/3/javascriptcharts/AmSerialChart#startEffect, только эффекты, которые доступны в данный момент времени являются ...

• easeOutSine
• easeInSine
• эластичным
• подпрыгивать

Это все отказы или слайды в виде графиков, в настоящее время они не предлагают joi n эффект типа точек, который вы еще хотите.

Answer 2

Да, вы можете анимировать свой амхарт таким образом, чтобы он рисовал. Вы делаете это с помощью 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/