사용자 입력을 그래프로 표시하는 간단한 HTML 코드를 제공합니다. 이 코드는 Chart.js 라이브러리를 사용하여 사용자가 입력한 데이터를 그래프로 시각화합니다.
<!DOCTYPE html>
<html>
<head>
<title>사용자 입력 그래프</title>
<!-- Chart.js CDN 추가 -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<h1>사용자 입력 그래프</h1>
<!-- 사용자 입력 필드와 버튼 -->
<label for="data">데이터 입력:</label>
<input type="number" id="data" placeholder="숫자 입력">
<button onclick="addData()">추가</button>
<!-- 그래프 표시 영역 -->
<canvas id="myChart"></canvas>
<script>
var dataPoints = []; // 사용자 입력 데이터를 저장할 배열
var chart = null; // 그래프 객체
// 초기 그래프 생성
function createChart() {
var ctx = document.getElementById("myChart").getContext("2d");
chart = new Chart(ctx, {
type: "line",
data: {
labels: [],
datasets: [{
label: "데이터",
data: dataPoints,
borderColor: "blue",
fill: false
}]
},
options: {
responsive: true,
maintainAspectRatio: false
}
});
}
// 데이터 추가 및 그래프 업데이트
function addData() {
var inputData = document.getElementById("data").value;
if (inputData !== "") {
dataPoints.push(inputData);
chart.data.labels.push(""); // 라벨은 빈 문자열로 설정
chart.update(); // 그래프 업데이트
document.getElementById("data").value = ""; // 입력 필드 초기화
}
}
// 페이지 로드 시 초기 그래프 생성
window.onload = createChart;
</script>
</body>
</html>
결과 보기
'HTML 예제' 카테고리의 다른 글
| 화면에 특수 효과 추가 (0) | 2023.12.07 |
|---|---|
| 간단한 슬라이더 만들기 (0) | 2023.12.07 |
| 마우스 오버 이벤트 (0) | 2023.12.07 |
| 사진 갤러리 만들기 (0) | 2023.12.07 |
| 화면 크기에 따른 반응형 디자인 (0) | 2023.12.07 |
