도넛 차트를 생성하는 간단한 JavaScript 코드를 설명해 드리겠습니다. 이 코드는 HTML5 <canvas> 요소를 사용하여 도넛 차트를 그리는 예제입니다.
HTML 파일 생성:
HTML 파일을 생성하고 <canvas> 요소를 추가합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="script.js" defer></script>
<title>도넛 차트</title>
</head>
<body>
<canvas id="donutChart" width="300" height="300"></canvas>
</body>
</html>
JavaScript 파일 생성:
JavaScript 파일(script.js)을 생성하고 아래의 코드를 추가합니다.
// script.js
const canvas = document.getElementById('donutChart');
const ctx = canvas.getContext('2d');
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const radius = 80;
const lineWidth = 40;
const data = [0.6, 0.4]; // 데이터 비율 (0 ~ 1)
let startAngle = -Math.PI / 2;
data.forEach((segment) => {
const endAngle = startAngle + 2 * Math.PI * segment;
ctx.beginPath();
ctx.arc(centerX, centerY, radius, startAngle, endAngle);
ctx.lineWidth = lineWidth;
ctx.strokeStyle = getRandomColor(); // 임의의 색상 생성 함수
ctx.stroke();
startAngle = endAngle;
});
function getRandomColor() {
const letters = '0123456789ABCDEF';
let color = '#';
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
결과 확인:
웹 브라우저에서 HTML 파일을 열어서 도넛 차트를 확인합니다.
'HTML 예제' 카테고리의 다른 글
| 사진 슬라이드 쇼: JavaScript로 사진 슬라이드 쇼 만들기 (1) | 2023.12.06 |
|---|---|
| 실시간 통계: JavaScript로 실시간 통계 표시 (0) | 2023.12.06 |
| 반응형 테이블: CSS 미디어 쿼리를 사용하여 반응형 테이블 디자인 (0) | 2023.12.06 |
| 동적 그래프: JavaScript와 HTML5 <canvas>로 동적 그래프 생성 (0) | 2023.12.06 |
| 타이핑 효과: JavaScript로 타이핑 효과 구현 (0) | 2023.12.06 |
