MIT 라이선스인 chart.js를 예제를 통해 간단하게 정리해 봅니다. 구현하고자 하는 모습은 아래의 영상과 같습니다.
꺽은선 차트이며, 2개의 데이터 축을 가지고 1초마다 데이터가 변경됩니다.
먼저 DOM 구조입니다.
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<div>
<canvas id="chart"></canvas>
</div>
CSS는 다음과 같구요.
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
body {
margin: 0;
padding: 0;
}
div {
width: 600px;
height: 400px;
padding: 20px;
}
이제 JS 코드에 대한 내용인데, 먼저 차트를 위한 기본 골격은 다음과 같습니다.
Chart.defaults.font.family = 'Noto Sans KR';
const ctx = document.getElementById('chart');
const config = {
// CORE PART !!
};
const chart = new Chart(ctx, config);
위의 config에 속성값을 지정함으로써 차트를 정의하는 세세한 내용을 결정할 수 있습니다. config에 대한 속성값은 다음과 같이 정의했습니다.
const config = {
type: 'line',
data: {
labels: ['빨강', 'Blue', 'Yellow', '초록', 'Purple', '오렌지'],
datasets: [
{
label: '변곡점1',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: 'yellow',
borderColor: 'black',
borderWidth: 1
},
{
label: '변곡점2',
data: [10, 16, 7, 6, 4, 2],
backgroundColor: 'white',
borderColor: 'gray',
borderWidth: 1
}
]
},
options: {
maintainAspectRatio: false,
plugins: {
title: {
display: true,
text: '차트, 그것이 알고 싶다.'
}
},
scales: {
x: {
title: {
display: true,
text: '색상'
}
},
y: {
title: {
display: true,
text: '변곡량'
}
}
},
}
}
앞서 실행 화면을 보면 1초마다 차트의 값이 변경되는 것을 볼 수 있습니다. 이에 대한 코드는 다음과 같습니다.
setInterval(() => {
const datasets = config.data.datasets;
for (let iDataset = 0; iDataset < datasets.length; iDataset++) {
const data = datasets[iDataset].data;
for (let iValue = 0; iValue < data.length; iValue++) {
data[iValue] += Math.random() * 2.0 - 1.0;
}
}
chart.update();
}, 1000);
