[javascript] Highcharts에서 상자 차트 만들기
Highcharts는 JavaScript로 작성된 강력한 차트 라이브러리입니다. 여기서는 Highcharts를 사용하여 상자 차트를 만드는 방법에 대해 알아보겠습니다.
상자 차트란?
상자 차트(Box plot)는 데이터 집합의 다섯가지 요약 통계량인 최솟값, 제 1사분위수, 중앙값, 제 3사분위수, 최댓값을 시각적으로 나타내는 차트입니다. 상자의 위 아래 선분은 최솟값과 최댓값을 나타내며, 상자는 제 1사분위수부터 제 3사분위수까지의 범위를 나타냅니다. 중앙값은 상자 안에 표시됩니다.
Highcharts에서 상자 차트 생성하기
먼저 Highcharts 라이브러리를 HTML 문서에 포함시키고, 차트를 생성할 div 요소를 생성합니다.
<!DOCTYPE html>
<html>
<head>
<title>Highcharts Box Plot Example</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container"></div>
</body>
</html>
다음으로, JavaScript 코드를 작성하여 상자 차트를 생성합니다.
// 데이터 설정
var data = [
[760, 801, 848, 895, 965],
[733, 853, 939, 980, 1080],
[714, 762, 817, 870, 918],
[724, 802, 806, 871, 950],
[834, 836, 864, 882, 910]
];
// 상자 차트 옵션 설정
var options = {
chart: {
type: 'boxplot'
},
title: {
text: 'Box Plot Example'
},
xAxis: {
categories: ['Data Set 1', 'Data Set 2', 'Data Set 3', 'Data Set 4', 'Data Set 5']
},
yAxis: {
title: {
text: 'Value'
}
},
series: [{
name: 'Observations',
data: data
}]
};
// 차트 생성
Highcharts.chart('container', options);
이제 HTML 파일을 열면, 상자 차트가 생성되어 나타납니다. 각 데이터 집합마다 상자가 그려지며, 최솟값, 최댓값, 제 1사분위수, 제 3사분위수, 중앙값이 시각적으로 표현됩니다.