[javascript] Chart.js에서의 거품 차트 생성 방법
거품 차트는 데이터 요소 간의 관계를 시각화하기 위해 사용되는 차트 유형입니다. Chart.js는 JavaScript로 작성된 오픈 소스 라이브러리로, 다양한 종류의 차트를 생성할 수 있습니다. 이번 포스트에서는 Chart.js를 사용하여 거품 차트를 생성하는 방법에 대해 알아보겠습니다.
1. Chart.js 라이브러리 설치
Chart.js를 사용하기 위해 먼저 해당 라이브러리를 설치해야 합니다. 아래의 명령어를 사용하여 npm을 통해 Chart.js를 설치할 수 있습니다.
npm install chart.js
2. HTML 파일 작성
거품 차트를 표시할 HTML 파일을 작성합니다. canvas 요소를 사용하여 차트를 그릴 영역을 생성합니다. 아래의 코드는 거품 차트를 표시할 canvas 요소를 가진 예제 HTML 파일입니다.
<!DOCTYPE html>
<html>
<head>
<title>거품 차트 예제</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<div>
<canvas id="bubbleChart"></canvas>
</div>
<script src="script.js"></script>
</body>
</html>
3. JavaScript 파일 작성
거품 차트를 생성하기 위해 JavaScript 파일을 작성해야 합니다. 아래의 코드는 거품 차트를 생성하는 JavaScript 파일의 예시입니다.
var ctx = document.getElementById('bubbleChart').getContext('2d');
var bubbleChart = new Chart(ctx, {
type: 'bubble',
data: {
datasets: [{
label: 'Sample Data',
data: [{
x: 10,
y: 20,
r: 30
}, {
x: 30,
y: 40,
r: 20
}, {
x: 50,
y: 60,
r: 50
}]
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
위의 JavaScript 코드에서는 bubble 유형의 차트를 생성하고, data 객체 내에서 데이터를 정의합니다. x, y, r 속성은 각 데이터 요소의 가로 위치(x), 세로 위치(y), 크기(r)를 나타냅니다.
4. 웹 브라우저에서 차트 확인
작성한 HTML 파일을 웹 브라우저에서 열어 거품 차트가 제대로 표시되는지 확인할 수 있습니다.