Intro
안녕하세요. 환이s입니다👋
오늘은 chart.js - 실시간 그래프 차트 구현하기 포스팅을 작성해보려 하는데요.
현대의 데이터 시각화는 정보의 전달과 이해를 돕기 위해 필수적입니다. 특히 실시간 데이터 분석과 모니터링이 중요한 시대에, 동적인 그래프 차트는 데이터를 효과적으로 전달하는 강력한 도구가 됩니다.
Chart.js는 간단하고 직관적인 API를 제공하는 오픈 소스 JavaScript 라이브러리로, 다양한 유형의 그래프를 손쉽게 그릴 수 있습니다.
특히 실시간 데이터 시각화에 적합한 기능을 갖추고 있어, 데이터 변화에 즉각적으로 반응하는 차트를 만들 수 있습니다.
Chart.js
Simple yet flexible JavaScript charting library for the modern web
www.chartjs.org
이 블로그 포스트에서는 간단한 예제를 통해 Chart.js를 활용하여 실시간 그래프 차트를 구현하는 방법에 대해 초보자부터 숙련된 개발자까지 누구나 쉽게 따라 할 수 있도록 안내하겠습니다.
HTML
먼저 차트에 필요한 HTML을 생성합니다.
//CSS
<style>
.chart-wrap {
position: relative;
}
.legend-container {
position: static;
display: flex;
align-items: flex-start;
flex-direction: row-reverse;
}
.legend-item {
display: flex;
align-items: center;
}
.legend-color-box {
width: 30px;
height: 5px;
margin-left : 20px;
}
</style>
//HTML
<div class="cont chart-wrap">
<div class="legend-container">
<div class="legend-item">
<div class="legend-color-box" style="background-color: rgba(255, 99, 132, 1);"></div>
<span>Upload</span>
<div class="legend-color-box" style="background-color: rgba(54, 162, 235, 1);"></div>
<span>Download</span>
<div class="legend-color-box" style="background-color: rgba(255, 206, 86, 1);"></div>
<span>CPU</span>
<div class="legend-color-box" style="background-color: rgba(75, 192, 192, 1);"></div>
<span>MEM</span>
</div>
</div>
<canvas id="myChart"></canvas>
</div>
간단하게 차트를 시각화하기 위한 기본 구조를 만들고, 범례를 각 데이터셋의 색상과 이름을 표시하여 사용자가 차트를 이해할 수 있게 CSS 처리를 했습니다.
또한, 실제 차트를 그릴 캔버스 요소를 생성하고 id 속성을 통해 자바 스크립트에서 해당 캔버스를 쉽게 참조할 수 있게 추가했습니다.
<canvas id="myChart"></canvas>
다음으로 차트를 구현하기 위해 chart.js를 추가해 줍니다.
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>JavaScript
앞서 캔버스는 실제 차트가 그려지는 공간이라고 했습니다.
그렇다면 자바 스크립트를 통해 간단하게 데이터를 추가하고 차트를 업데이트하는 로직을 구현해 보겠습니다.
var ctx = document.getElementById('myChart').getContext('2d');
var Chart = new Chart(ctx, {
type: 'line',
data: {
labels: [0, 1, 2, 3],
datasets: [
{
label: 'Upload',
data: [0, 0, 0, 0],
borderColor: 'rgba(255, 99, 132, 1)',
borderWidth: 1,
fill: false,
lineTension: 0.1
},
{
label: 'Download',
data: [0, 0, 0, 0],
borderColor: 'rgba(54, 162, 235, 1)',
borderWidth: 1,
fill: false,
lineTension: 0.1
},
{
label: 'CPU',
data: [0, 0, 0, 0],
borderColor: 'rgba(255, 206, 86, 1)',
borderWidth: 1,
fill: false,
lineTension: 0.1
},
{
label: 'MEM',
data: [0, 0, 0, 0],
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1,
fill: false,
lineTension: 0.1
}
]
},
options: {
plugins: {
legend: {
display: false // 범례 숨기기
},
tooltip: {
enabled: false
}
},
scales: {
x: {
type: 'linear',
position: 'bottom'
}
}
}
});
let dataIndex = 4;
function addData(chart, label) {
if (chart.data.labels.length > 100) {
chart.data.labels.shift();
chart.data.datasets.forEach((dataset) => {
dataset.data.shift();
});
}
chart.data.labels.push(label);
chart.data.datasets[0].data.push(Math.sin(label * 0.1) * 10); // 첫 번째 데이터셋
chart.data.datasets[1].data.push(Math.cos(label * 0.1) * 10); // 두 번째 데이터셋
chart.data.datasets[2].data.push(Math.cos(label * 0.1) * 30); // 세 번째 데이터셋
chart.data.datasets[3].data.push(Math.sin(label * 0.1) * 30); // 네 번째 데이터셋
chart.update();
}
setInterval(function() {
addData(Chart, dataIndex); // 새로운 데이터 추가
dataIndex++;
}, 1000);
스크립트 흐름을 간단히 설명해 보겠습니다.
1️⃣ Chart.js 초기화
var ctx = document.getElementById('myChart').getContext('2d');- HTML에서 id가 myChart인 <canvas> 요소를 찾아서 2D 그래픽 컨텍스트를 갖고 차트를 그릴 준비를 합니다.
var Chart = new Chart(ctx, {
type: 'line',
...
});- Chart.js를 사용하여 새로운 차트를 생성합니다. ctx는 차트를 그릴 캔버스의 2D 컨텍스트입니다.
- 차트의 유형은 선형(line) 차트로 설정했습니다.
jQuery로 구현하고 싶으신 분은 다음과 같이 초기화시키시면 됩니다.
var ctx = $('#myChart').get(0).getContext('2d');2️⃣ 데이터 설정
data: {
labels: [0, 1, 2, 3],
datasets: [
{
label: 'Upload',
data: [0, 0, 0, 0],
borderColor: 'rgba(255, 99, 132, 1)',
borderWidth: 1,
fill: false,
lineTension: 0.1
},
...
]
}
- labels : x축에 표시될 데이터 포인트의 레이블입니다. 저는 0부터 3까지의 숫자로 설정했습니다.
- datasets : 여러 데이터셋을 포함하는 배열입니다. 각 데이터셋은 차트에 그릴 데이터와 스타일을 정의합니다.
- label: 데이터셋의 이름입니다 (예: 'Upload')
- data: 해당 데이터셋의 값들입니다. 초기값은 모두 0으로 설정했습니다.
- borderColor: 선의 색상을 설정합니다.
- borderWidth: 선의 두께를 설정합니다.
- fill: 선 아래를 채울지 여부를 설정합니다 (false로 설정하여 채우지 않음)
- lineTension: 선의 곡률을 설정합니다 (0.1로 설정하여 약간의 곡선)
3️⃣ 옵션 설정
options: {
plugins: {
legend: {
display: false // 범례 숨기기
}
},
scales: {
x: {
type: 'linear',
position: 'bottom' // x축을 선형으로 설정하고 아래에 배치
}
}
}
- 차트의 플로그인 옵션을 설정합니다.
- legend : 범례를 숨기는 설정입니다.(범례로 보일 내용은 HTML로 생성했습니다.)
- 축의 설정을 정의합니다.
- x : x축의 유형을 선형으로 설정했습니다.
4️⃣ 데이터 추가 함수
let dataIndex = 4;
function addData(chart, label) {
if (chart.data.labels.length > 100) {
chart.data.labels.shift(); // 첫 번째 레이블 제거
chart.data.datasets.forEach((dataset) => {
dataset.data.shift(); // 각 데이터셋의 첫 번째 데이터 제거
});
}
chart.data.labels.push(label); // 새로운 레이블 추가
//테스트 데이터
chart.data.datasets[0].data.push(Math.sin(label * 0.1) * 10); // 첫 번째 데이터셋
chart.data.datasets[1].data.push(Math.cos(label * 0.1) * 10); // 두 번째 데이터셋
chart.data.datasets[2].data.push(Math.cos(label * 0.1) * 30); // 세 번째 데이터셋
chart.data.datasets[3].data.push(Math.sin(label * 0.1) * 30); // 네 번째 데이터셋
chart.update(); // 차트 업데이트
}- dataIndex : 데이터 인덱스를 초기화시키고 4부터 시작합니다.
- addData(chart, label): 차트에 새로운 데이터를 추가하는 함수입니다.
5️⃣ 주기적으로 데이터 추가
setInterval(function() {
addData(Chart, dataIndex); // 새로운 데이터 추가
dataIndex++; // 데이터 인덱스 증가
}, 1000); // 1초마다 실행- setInterval(...) : 주기적으로 함수 실행을 설정하는 메서드입니다.
- 1초(1000ms) 마다 addData 함수를 호출하여 새로운 데이터를 추가하고, 데이터 인덱스를 증가시킵니다.
예제로는 Chart.js를 사용하여 실시간으로 업데이트되는 선형 차트를 생성했습니다. 각 데이터셋을 기반으로 데이터를 계산하여 1초마다 새로운 데이터를 추가하고, 이를 통해 차트를 갱신합니다.
위 코드를 실행하면 다음과 같은 결과를 확인할 수 있습니다.
✅ RESULT
마치며
이번 포스팅에서는 Chart.js를 활용하여 실시간으로 업데이트되는 선형 차트를 구현하는 방법에 대해 알아보았습니다.
데이터를 시각적으로 표현하는 것은 정보 전달의 효율성을 높이고, 사용자 경험을 향상하는 데 큰 도움이 됩니다. 특히, 실시간 데이터 모니터링이 필요한 다양한 분야에서 유용하게 활용될 수 있습니다.
이를 바탕으로 자신만의 차트를 만들어보고, 필요에 따라 다양한 스타일과 기능을 추가해 보시면 될 거 같습니다.
다음 포스팅에서 뵙겠습니다👋
'[ Script ] > JAVA Script' 카테고리의 다른 글
| [ jQuery ] Validation Plugin - 유효성 검사 (3) | 2024.01.23 |
|---|---|
| [ jQuery ] DataTables - Ajax Table Data 출력 (46) | 2024.01.18 |
| [ JAVA Script ] Promise Constructor (0) | 2023.10.21 |
| [ JAVA Script ] Mobile Web UI구현 (0) | 2023.02.28 |
| [ JAVA Script ] Ajax (0) | 2023.02.27 |