Я пытаюсь создать динамический линейный финансовый график с использованием полилинии svg.
Мне удалось обновить диаграмму, добавляя новые координаты через каждую секунду. Но я хочу, чтобы он анимировал каждую координату, а не прыгал к новым координатам через одну секунду
Я пытался использовать библиотеку ключевых кадров jquery, но анимация была не той, которую я хотел. Я хочу анимировать полилинию от начальной координаты до новой координаты
$.keyframe.define([{
name: 'myfirst',
from: {
'stroke-dashoffset': '1000'
},
to: {
'stroke-dashoffset': '0'
}
}]);
$("#path").css({"stroke-dasharray":'1000',"stroke-dashoffset":'1000'});
$("#path").playKeyframe({
name: 'myfirst',
duration: '5s',
timingFunction: 'linear',
iterationCount: '1'
});
HTML
<body>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1000px" height="600px" class="logo-outline" viewBox="0 0 1000 600" enable-background="new 0 0 1000 600" xml:space="preserve">
<polyline id="path" style="fill:none;stroke:black;stroke-width:3" />
</svg></body>
JAVASCRIPT
$(document).ready(function() {
var x = 0;
var y1 = 0;
var y2 = 0;
var y = 0;
var point = 0+","+Math.round(Math.random()*1000);
function upD() {
x+=40;
y2 = y1;
y1=y;
y = Math.round(Math.random()*100);
point+=" "+x+","+y;
document.getElementById('path').setAttribute('points',point);
// jquery keyframe library
$.keyframe.define([{
name: 'myfirst',
from: {
'stroke-dashoffset': '80%'
},
to: {
'stroke-dashoffset': '0'
}
}]);
$("#path").css({"stroke-dasharray":'100%',"stroke-dashoffset":'100%'});
$("#path").playKeyframe({
name: 'myfirst',
duration: '5s',
timingFunction: 'linear',
iterationCount: '1'
});
}
window.setInterval(upD,3000);
});
Я намереваюсь сделать график с полилинейной анимацией, такой как олимпийская торговля, или бинарный торговый график, или что-то похожее на тиковый график