동적 그래프를 JavaScript와 HTML5 <canvas>로 만들기 위해서는 <canvas> 요소를 생성하고 JavaScript를 사용하여 그래프를 그리는 코드를 작성해야 합니다. 아래는 초보자도 이해할 수 있도록 단계별로 설명한 코드입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>동적 그래프</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="200"></canvas>
<script src="script.js"></script>
</body>
</html>
JavaScript 파일 생성:
JavaScript 파일(script.js)을 생성하고 그래프를 그리는 코드를 작성합니다.
// 캔버스 요소와 2D 컨텍스트 가져오기
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// 그래프 데이터 설정 (예: 월별 판매량)
const data = [50, 80, 120, 90, 150, 100, 70];
// 그래프 그리기 함수
function drawGraph() {
const barWidth = 30; // 막대 너비
const barSpacing = 40; // 막대 간격
const startX = 40; // 그래프 시작 위치 (X 좌표)
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (let i = 0; i < data.length; i++) {
const barHeight = data[i];
const x = startX + i * (barSpacing + barWidth);
const y = canvas.height - barHeight;
ctx.fillStyle = "blue"; // 막대 색상 설정
ctx.fillRect(x, y, barWidth, barHeight);
}
}
// 초기 그래프 그리기
drawGraph();
결과 확인:
웹 브라우저에서 HTML 파일을 열어서 동적 그래프를 확인합니다.
'HTML 예제' 카테고리의 다른 글
| 도넛 차트: JavaScript와 HTML5 <canvas>로 도넛 차트 생성 (0) | 2023.12.06 |
|---|---|
| 반응형 테이블: CSS 미디어 쿼리를 사용하여 반응형 테이블 디자인 (0) | 2023.12.06 |
| 타이핑 효과: JavaScript로 타이핑 효과 구현 (0) | 2023.12.06 |
| 팝아트 이미지: 이미지를 팝아트 스타일로 변경 (0) | 2023.12.06 |
| 투명한 텍스트: 텍스트 내용이 배경 이미지와 일부 투명하게 표시 (0) | 2023.12.06 |
