반응형
[JavaScript] 자바스크립트로 실시간으로 그리는 그래프 만드는 방법 !! (chart.js 사용)
안녕하세요. chart.js 의 차트를 활용하여 실시간으로 그래프가 움직여지게 만들어 보았습니다.
공식사이트를 아래 링크 참조 :)
<!DOCTYPE html>
<html>
<head>
<title>Real-time Graph</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<canvas id="Chart" width="800" height="400"></canvas>
<script>
var ctx = document.getElementById('Chart').getContext('2d');
var Chart = new Chart(ctx, {
type: 'line',
data: {
labels: [], // 초기 라벨(시간)은 비워둠
datasets: [{
label: 'Signal',
data: [], // 초기 데이터는 비워둠
borderColor: 'rgba(255, 99, 132, 1)',
borderWidth: 1,
fill: false,
lineTension: 0.1
}]
},
options: {
animation: true, // 실시간 성능을 위해 애니메이션 비활성화
scales: {
x: {
type: 'linear',
position: 'bottom'
}
}
}
});
let dataIndex = 0;
function addData(chart, label, data) {
if (chart.data.labels.length > 100) { // 최대 데이터 포인트 수를 100으로 제한
chart.data.labels.shift(); // 가장 오래된 라벨 제거
chart.data.datasets.forEach((dataset) => {
dataset.data.shift(); // 가장 오래된 데이터 포인트 제거
});
}
chart.data.labels.push(label);
chart.data.datasets.forEach((dataset) => {
dataset.data.push(data);
});
chart.update();
}
// 데이터를 업데이트하는 함수를 1000ms(1초)마다 실행
setInterval(function() {
// 새로운 데이터 포인트 생성 (예: 사인파)
const newData = Math.sin(dataIndex * 0.1) * 10;
addData(Chart, dataIndex, newData);
dataIndex++;
}, 200);
</script>
</body>
</html>결과
chart.js 공식사이트
Chart.js
Simple yet flexible JavaScript charting library for the modern web
www.chartjs.org
728x90
반응형
'Coding > JavaScript' 카테고리의 다른 글
| [JavaScript] 토글 스위치로 전구 Turn On/Off 하기 !! (0) | 2024.02.22 |
|---|---|
| [JavaScript] chart.js 사용 중 그래프 사이즈 및 크기 조정하는 방법 !! (0) | 2024.02.19 |
| [JavaScript] 자바스크립트 특정 문자를 찾아 지우는 방법 !! (원하는 범위에서 문자 지우기) (0) | 2024.02.17 |
| [JavaScript] 자바스크립트 특정 범위의 랜덤 정수 생성하는 방법 !! (원하는 범위 숫자 랜덤하게) (0) | 2024.02.16 |
| [JavaScript] 자바스크립트로 sessionStorage 데이터 저장 및 사용, 삭제 하는 방법 !! (0) | 2024.01.27 |
댓글