ChatGPT로 Chart.js 알아보기 (5):선 그래프 (Line Chart)

ChatGPT로 Chart.js 알아보기 (5):선 그래프(Line Chart)

이번 포스트에서는 ChatGPT로 Chart.js를 사용해서 Line Chart(선 그래프 또는 꺾은 선 그래프)를 만드는 방법에 대해 알아보고, 내용을 정리해보았다.
Line chart란 무엇인지, Chart.js로 어떻게 코드를 작성해야하는지, options를 통해 어떻게 변경이 가능한지 간단하게 알아보았다.

Line Chart란?

Line Chart는 점들이 선으로 연결되어 표시되는 그래프로, 시간에 따른 데이터의 변화를 시각적으로 나타내는데 주로 사용된다.
X축은 주로 시간을 나타내며, Y축은 측정하고자 하는 값을 나타낸다.
이를 통해 데이터의 추세나 패턴을 쉽게 확인할 수 있다.

 

Line Chart는 주로 아래와 같은 상황에서 사용된다.

• 시간에 따른 변화 파악: 주식 가격, 기온 변화, 웹사이트 방문자 수 등 시간에 따라 변하는 데이터를 분석할 때 사용될 수 있다.
• 추세 분석: 판매량, 사용자 활동, 트래픽 등의 데이터 추세를 분석하여 미래 예측에 활용할 수 있다.
• 비교 분석: 두 개 이상의 데이터 셋을 비교하여 상호작용이나 차이점을 분석하는 데 사용될 수 있다. 예를 들어, 여러 제품의 판매량을 비교하거나, 여러 지역의 기후 데이터를 비교할 때 사용할 수 있다.

Line Chart는 많은 양의 데이터를 간결하고 명확하게 표현할 수 있으며,
데이터의 상승, 하락, 또는 일정한 추세를 한눈에 쉽게 파악하기에 용이하다.
또한 여러 데이터 셋을 동시에 표현하여 비교 분석이 용이하다.

단, 데이터가 많고 변동폭이 큰 경우, 일부 중요한 정보가 눈에 띄지 않을 수 있으며,
데이터의 정확한 값을 한눈에 알기 어려울 수 있다.
특히 여러 데이터 세트가 겹쳐져 있을 때 이해하기 어려울 수 있으니 주의해야한다.

Line Chart 생성

Cahrt.js로 Line chart를 생성하려면 type을 line으로 설정하면 된다.

type: 'line'

위에서 생성한 Line Chart는 아래와 같은 코드로 생성할 수 있다.

<div style="max-width: 600px;">
    <canvas id="lineExample"></canvas>
</div>

const lineExample = document.querySelector('#lineExample').getContext('2d');

const lineExampleChart = new Chart(lineExample, {
    type: 'line',
    data: {
        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
        datasets: [{
            label: 'My First Dataset',
            data: [65, 59, 80, 81, 56, 55, 40],
            borderColor: 'rgba(75, 192, 192, 1)',
            borderWidth: 1,
            fill: false
        }]
    },
    options: {
        scales: {
            x: {
                beginAtZero: true
            },
            y: {
                beginAtZero: true
            }
        }
    }
});

변수	설명
data	차트에 표시될 데이터를 설정. labels와 datasets를 포함한다.
labels	X축에 표시될 레이블을 설정.
datasets	차트에 표시될 데이터 셋을 설정. 데이터 값, 색상, 두께 등 다양한 속성을 설정할 수 있다.
label	데이터 셋의 레이블을 설정. 범례에 표시된다.
data (in datasets)	데이터 셋의 실제 값들을 설정.
borderColor	선의 색상을 설정.
borderWidth	선의 두께를 설정.
fill	선 아래 영역을 채울지 여부를 설정. false로 설정하면 채우지 않는다.
options	차트의 옵션을 설정.
scales	X축과 Y축의 설정을 지정.
beginAtZero	X축 또는 Y축이 0에서 시작할지를 설정. true로 설정하면 0에서 시작한다.

예시

Line chart의 예시와 함께 다른 options들도 함께 알아보자.

✔ 사용자 방문 통계
웹사이트에 방문하는 사용자 수를 Line Chart로 표시해 볼 수 있다.
이 예시에서는 data 옵션 중에 fill을 true로 설정해보겠다.

 

const lineCtx = document.querySelector('#userVisit').getContext('2d');

const lineChart = new Chart(lineCtx, {
	    labels: ['월', '화', '수', '목', '금', '토', '일'],
	    datasets: [{
	        label: '사용자 방문수',
	        data: [120, 150, 130, 160, 180, 170, 140],
	        borderColor: 'rgba(153, 102, 255, 1)',
	        borderWidth: 2,
	        fill: true,
	        backgroundColor: 'rgba(153, 102, 255, 0.5)'
	    }]
	},
	options: {}
});

위 예시처럼 fill을 true로 설정하면 선 아래 영역을 채워줄 수 있다.
그리고 backgroundColor로 색상을 지정해주면 차트에 채워지는 색상을 지정해줄 수 있다.

datasets: [{
		// data ...
		fill: true,
		backgroundColor: 'rgba(153, 102, 255, 0.5)'
	}]

✔ 월별 판매량
판매량을 월별로 표시하는 Line Chart를 만들어서, 상품의 판매 추세를 쉽게 확인할 수 있다.
이를 통해 어떤 시기에 판매량이 증가하는지, 감소하는지 파악할 수 있다.
이 예시에서는 직선 형태가 아닌 곡선 형태 option을 추가해보겠다.

 

const lineCtx = document.querySelector('#salesLineChart').getContext('2d');

const lineChart = new Chart(lineCtx, {
	type: 'line',
	data: {
		labels: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],
		datasets: [{
			label: '판매량',
			data: [10, 30, 25, 40, 50, 70, 65, 55, 60, 80, 75, 90],
			borderColor: 'rgba(75, 192, 192, 1)',
			borderWidth: 2,
			fill: false
		}]
	},
	options: {
		scales: {
			x: {
				beginAtZero: true
			},
			y: {
				beginAtZero: true
			}
		},
		elements: {
			line: {
				tension: 0.4
			}
		}
	}
});

위 차트 처럼 Line Chart를 곡선 형태로 변경하려면 options에 elements:line에 tension을 추가해주면 된다.

options: {
    elements: {
        line: {
            tension: 0.4 // 0은 직선, 1에 가까울수록 더 곡선
        }
    }
}

✔ 상품의 판매 추이 비교
두 상품의 판매량을 동일한 Line Chart에 표시하여, 상품 간의 판매 추이를 비교하는 예시를 만들어보았다.
이 예시에서는 Line Chart의 점(point)를 별 모양으로 변경해보겠다.

 

const lineCtx = document.querySelector('#comparisonChart').getContext('2d');

const lineChart = new Chart(lineCtx, {
	labels: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],
	datasets: [{
			label: '상품 A',
			data: [10, 30, 25, 40, 50, 70, 65, 55, 60, 80, 75, 90],
			borderColor: 'rgba(75, 192, 192, 1)',
			borderWidth: 2,
			fill: false
		},
		{
			label: '상품 B',
			data: [15, 25, 30, 45, 55, 60, 70, 60, 65, 85, 80, 95],
			borderColor: 'rgba(255, 99, 132, 1)',
			borderWidth: 2,
			fill: false
		}]
	},
	options: {
		scales: {
			x: {
				beginAtZero: true
			},
			y: {
				beginAtZero: true
			}
		},
		elements: {
			point: {
				radius: 6,
				pointStyle: 'star'
			}
		}
	}
});

point의 모양을 변경하려면 options의 elements:point에 각 옵션을 지정해주면 된다.

options: {
    elements: {
        point: {
            radius: 6,
            pointStyle: 'star'
        }
    }
}

pointStyle	설명
circle	원형 모양의 점
cross	십자가 모양의 점
crossRot	회전한 십자가 모양의 점
dash	대시 모양의 점
line	선 모양의 점
rect	사각형 모양의 점
rectRounded	모서리가 둥근 사각형 모양의 점
rectRot	회전한 사각형 모양의 점
star	별 모양의 점
triangle	삼각형 모양의 점

datasets 안에서 각 데이터셋별로 pointStyle 속성을 설정함으로써, 각각의 라인에 대해 다른 점 모양을 사용할 수도 있다.
여기서는 상품 A 라인의 점 모양을 별로, 상품 B 라인의 점 모양을 십자가 형태로 설정하는 예시를 들겠다.

 

const lineCtx = document.querySelector('#comparisonChart2').getContext('2d');

const lineChart = new Chart(lineCtx, {
	labels: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],
	datasets: [{
			label: '상품 A',
			data: [10, 30, 25, 40, 50, 70, 65, 55, 60, 80, 75, 90],
			borderColor: 'rgba(75, 192, 192, 1)',
			borderWidth: 2,
			fill: false,
			pointStyle: 'star',
			pointRadius: 6,
		},
		{
			label: '상품 B',
			data: [15, 25, 30, 45, 55, 60, 70, 60, 65, 85, 80, 95],
			borderColor: 'rgba(255, 99, 132, 1)',
			borderWidth: 2,
			fill: false,
			pointStyle: 'cross',
			pointRadius: 6,
		}]
	},
	options: {}
});

위 예시에서 datasets의 각 data에 pointStyle, pointRadius를 설정해줘서 각 라인별로 point 모양을 변경할 수 있는 것을 볼 수 있다.

이번 포스트에서는 Chart.js로 Line Chart를 생성하는 방법에 대해 알아보았다.
확실히 Chart.js의 코드는 직관적이고 사용이 편리한 것 같다.
필자의 경우 웹상에 Chart를 구현할 일이 업무상에서는 별로 없긴 하지만... 언젠가는 꼭 활용해 봐야겠다.

커피 한 잔으로
저를 응원해주세요!