Добрый день, создал динамически обновляемый график:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>График</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<h1 style="color: white; text-align: center;">График</h1>
<canvas id="Chart" width="800" height="600" style="background-color: black;"></canvas>
<script>
document.addEventListener('DOMContentLoaded', () => {
const ctx = document.getElementById('Chart').getContext('2d');
const data = {
labels: [],
datasets: [
{
label: 'Значение',
data: [],
borderColor: 'rgba(255, 255, 255, 1)',
backgroundColor: 'rgba(255, 255, 255, 0.2)',
borderWidth: 1,
fill: true,
pointRadius: 0,
pointBorderWidth: 0
},
{
label: 'Текущее значение',
data: [],
borderColor: 'rgba(255, 255, 255, 0.5)',
borderWidth: 1,
pointRadius: 0,
fill: false,
borderDash: [5, 5],
spanGaps: true
}
]
};
let currentPrice = 0;
const config = {
type: 'line',
data: data,
options: {
responsive: false,
maintainAspectRatio: false,
animation: {
duration: 1000,
easing: 'easeOutQuart'
},
scales: {
x: {
type: 'category',
position: 'bottom',
title: {
display: true,
text: 'Время',
color: 'white'
},
ticks: {
maxTicksLimit: 4,
color: 'white'
}
},
y: {
suggestedMin: null,
suggestedMax: null,
title: {
display: true,
text: 'Значение',
color: 'white'
},
ticks: {
maxTicksLimit: 3,
color: 'white'
},
grid: {
color: 'rgba(255, 255, 255, 0.2)'
}
}
},
plugins: {
legend: {
display: false,
labels: {
color: 'white'
}
}
}
}
};
const Chart1 = new Chart(ctx, config);
function generateRandomData() {
const value = (Math.random() * 10000 + 20000).toFixed(2);
const now = new Date();
const timestamp = now.toTimeString().split(' ')[0].slice(0, 8);
if (data.labels.length >= 10) {
data.labels.shift();
data.datasets[0].data.shift();
}
data.labels.push(timestamp);
data.datasets[0].data.push(parseFloat(value));
currentPrice = parseFloat(value);
data.datasets[1].data = new Array(data.labels.length).fill(currentPrice);
Chart1.options.scales.y.suggestedMin = Math.min(...data.datasets[0].data) - 500;
Chart1.options.scales.y.suggestedMax = Math.max(...data.datasets[0].data) + 500;
Chart1.update();
}
setInterval(generateRandomData, 1000);
});
</script>
</body>
</html>
беда в том что когда точек на графике становится > 10 то самая старая точка удаляется и добавляется новая. Моя проблема в анимации удаления и добавления точек на график ,а именно: при добавлении точки линия начинает расти от 0 до точки назначения (запустите код и все поймете), а при удалении идет грубое удаление точки, а хотел бы создать эффект ухода точки за границу.
Как можно решить эти проблемы? Извините что отвлекаю и буду признателен за любой совет.
