[javascript] Chart.js에서의 시계열 예측 결과 시각화
Chart.js는 웹 기반 시각화 라이브러리로서, 다양한 종류의 그래프와 차트를 만들 수 있습니다. 이 라이브러리를 사용하여 시계열 데이터의 예측 결과를 시각화하는 방법을 알아보겠습니다.
1. 데이터 준비
시계열 예측 결과를 시각화하기 위해서는 먼저 데이터를 준비해야 합니다. 예측 결과 데이터는 시간에 따른 값을 포함해야 하며, 이를 배열 형태로 구성합니다. 예를 들어, 아래와 같이 1월부터 6월까지의 예측 결과 데이터를 배열로 표현할 수 있습니다.
var predictions = [10, 12, 15, 18, 20, 22];
2. Chart.js 설정
Chart.js를 사용하기 위해 먼저 해당 라이브러리를 포함시켜야 합니다. HTML 파일의 <head> 태그 내에 아래와 같이 스크립트를 추가합니다.
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
3. 그래프 생성
그래프를 생성하기 위해 <canvas> 태그를 HTML 파일에 추가합니다. 해당 태그는 그래프를 그릴 영역을 정의하는 용도로 사용됩니다. 아래와 같이 <canvas> 태그를 추가합니다.
<canvas id="prediction-chart"></canvas>
다음으로, JavaScript 코드에서 Chart.js를 사용하여 그래프를 생성합니다. 아래와 같이 JavaScript 코드를 작성합니다.
var ctx = document.getElementById('prediction-chart').getContext('2d');
var chart = new Chart(ctx, {
type: 'line',
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June'],
datasets: [{
label: 'Prediction Results',
data: predictions,
borderColor: 'blue',
backgroundColor: 'transparent',
borderWidth: 2
}]
},
options: {
responsive: true,
scales: {
y: {
beginAtZero: true
}
}
}
});
위 코드에서는 new Chart() 생성자를 사용하여 그래프를 생성하고, type을 'line'으로 설정하여 선 그래프를 생성합니다. data 속성은 예측 결과 데이터를 포함하고, options 속성은 그래프의 옵션을 설정합니다.
4. 결과 확인
위의 코드를 실행하여 그래프를 생성하고 확인해보세요. 그래프는 'prediction-chart'라는 ID를 가진 <canvas> 태그에 그려집니다. 브라우저에서 그래프를 확인할 수 있습니다.