Chart.js는 강력한 JavaScript 라이브러리로, 다양한 종류의 그래프와 차트를 생성할 수 있습니다. 구간 차트는 두 개 이상의 값의 범위를 시각적으로 표시하는데 사용되며, 주로 시계열 데이터의 변동 범위를 나타내는데 유용합니다.
1. Chart.js 설치
먼저, Chart.js를 사용하기 위해 해당 라이브러리를 프로젝트에 설치해야 합니다. 다음 명령어를 사용하여 npm으로 설치할 수 있습니다.
npm install chart.js
2. HTML 파일에 Chart.js 연결
Chart.js를 사용하기 위해, HTML 파일에서 아래와 같이 script 태그를 사용하여 Chart.js 파일을 연결해야 합니다.
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
3. 구간 차트 데이터 준비
구간 차트를 생성하기 위해 필요한 데이터를 준비해야 합니다. Chart.js에서는 데이터를 다음과 같은 형식으로 입력합니다.
const data = {
labels: ['Label 1', 'Label 2', 'Label 3'],
datasets: [{
label: 'Dataset 1',
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgba(255, 99, 132, 1)',
data: [
{x: 'Label 1', y: 10},
{x: 'Label 2', y: 15},
{x: 'Label 3', y: {from: 12, to: 18}}
]
}]
};
위 코드에서 labels는 각 구간의 레이블을 포함하는 배열이고, datasets는 구간을 나타내는 데이터의 배열입니다. datasets 배열은 각 구간의 레이블, 배경 색상, 테두리 색상 및 데이터를 포함합니다. 구간 데이터는 x와 y 속성을 사용하여 지정할 수 있으며, y 값에 {from: 12, to: 18}와 같이 범위를 지정할 수도 있습니다.
4. 구간 차트 생성
구간 차트를 생성하기 위해 Canvas 요소를 HTML 파일에 추가하고, JavaScript 코드를 사용하여 Chart.js를 초기화하고 구간 차트를 그립니다.
<canvas id="myChart"></canvas>
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'line',
data: data,
options: {
responsive: true,
scales: {
y: {
beginAtZero: true
}
}
}
});
위 코드에서 type 속성은 차트의 유형을 지정합니다. 구간 차트를 생성하기 위해 type을 'line'으로 설정해야 합니다. data 속성에는 앞서 준비한 데이터를 입력하고, options 속성에서 차트의 맞춤 설정을 지정할 수 있습니다. 위 예제에서는 Y 축이 0에서 시작하도록 beginAtZero 옵션을 사용했습니다.
5. 구간 차트 스타일링
Chart.js에서는 구간 차트의 스타일을 사용자 정의할 수 있습니다. backgroundColor, borderColor와 같은 속성을 사용하여 채우기 색상 및 테두리 색상을 지정할 수 있습니다. 또한, options 속성에서 다양한 스타일 옵션을 설정할 수도 있습니다.
const data = {
datasets: [{
label: 'Dataset 1',
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgba(255, 99, 132, 1)',
borderWidth: 2,
borderDash: [5, 5],
data: [
{x: 'Label 1', y: 10},
{x: 'Label 2', y: 15},
{x: 'Label 3', y: {from: 12, to: 18}}
]
}]
};
위 코드에서는 borderWidth 속성을 사용하여 테두리의 두께를 조절하고, borderDash 속성을 사용하여 점선 스타일을 지정합니다.