728x90
반응형
자바스크립트에서 수치를 나타내는 그래프 그리기
데이터를 시각적으로 표현하기 위해서 그래프나 표를 많이 사용한다.
웹 상에서 그래프를 쉽고 간단하게 출력할 수 있는 코드들을 리뷰해보려 한다.
리뷰할 라이브러리는 GoogleChart와 Chart.js이다.
구글차트와 차트.js 차이점
- 라이브러리 로드 방식
구글차트: 구글 차트 라이브러리는 google.charts.load()와 google.charts.setOnLoadCallback() 함수를 사용하여 비동기식 로드
차트.js: 차트.js는 외부 라이브러리를 로드할 필요없이, CDN에서 직접 라이브러리를 가져올 수 있음
- 차트 유형
구글차트: 구글 차트는 다양한 차트 유형을 지원. 예를 들어, 막대 그래프, 파이 차트, 계열 차트, 지도 등이 있음
차트.js: 차트.js는 주로 선 그래프와 같은 간단한 차트 유형을 다룸
- 데이터 포맷
구글차트: 구글 차트는 JSON, CSV, Google Sheets 등의 데이터 형식을 지원
차트.js: 차트.js는 주로 배열 형태의 데이터를 사용
- 설정 방식
구글차트: 구글 차트는 복잡한 차트를 생성하려면 많은 옵션을 설정해야 함
차트.js: 차트.js는 보다 간단한 설정으로도 쉽게 차트를 생성할 수 있음
따라서, 구글차트와 차트.js는 각각의 특징에 따라 선택하면 되고
장점으로는 구글차트는 다양한 차트와 데이터 형식을 지원하며, 차트.js는 간단하게 차트를 생성할 수 있습니다.
아래는 간단하게 구현한 그래프
1. Chart.js 라이브러리 사용
소스코드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>실시간 데이터 차트</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
#chart-container {
height: 500px;
}
</style>
</head>
<body>
<div id="chart-container">
<canvas id="chart"></canvas>
</div>
<script>
// 그래프 초기화
document.addEventListener("DOMContentLoaded", function() {
var chartContainer = document.getElementById('chart-container');
var chartCanvas = document.getElementById('chart');
var ctx = chartCanvas.getContext('2d');
var chart = new Chart(ctx, {
type: 'line',
data: {
labels: [],
datasets: [{
label: '실시간 데이터',
data: [],
borderColor: 'blue',
borderWidth: 1,
fill: false
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
x: {
display: true,
ticks: {
autoSkip: true,
maxTicksLimit: 10
}
},
y: {
display: true,
suggestedMin: 0,
suggestedMax: 100
}
}
}
});
// 데이터 업데이트 함수
function updateData() {
var time = new Date().toLocaleTimeString('en-US', { hour12: false, hour: '2-digit', minute: '2-digit', second: '2-digit' });
chart.data.labels.push(time);
chart.data.datasets[0].data.push(Math.random() * 100);
chart.update();
// 일정 간격으로 데이터 업데이트
setTimeout(updateData, 1000);
}
// 초기 데이터 업데이트
updateData();
});
</script>
</body>
</html>
실행 결과
2. Google Chart 라이브러 사용
소스코드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>실시간 데이터 차트</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<style>
#chart-container {
height: 500px;
}
</style>
</head>
<body>
<div id="chart-container"></div>
<script>
// 그래프 초기화
google.charts.load('current', {packages: ['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('datetime', 'Time');
data.addColumn('number', 'Value');
var options = {
title: '실시간 데이터 차트',
curveType: 'function',
legend: {position: 'bottom'}
};
var chart = new google.visualization.LineChart(document.getElementById('chart-container'));
var maxDataPoints = 100; // 표시할 최대 데이터 개수
var startTime = new Date();
var dataPoints = [];
// 데이터 추가 및 그래프 업데이트
function addData() {
var x = new Date();
var y = Math.floor(Math.random() * (500 - 200 + 1)) + 200;
dataPoints.push([x, y]);
if (dataPoints.length > maxDataPoints) {
dataPoints.shift(); // 가장 오래된 데이터 제거
}
data = new google.visualization.DataTable();
data.addColumn('datetime', 'Time');
data.addColumn('number', 'Value');
data.addRows(dataPoints);
chart.draw(data, options);
setTimeout(addData, 1000); // 1초마다 데이터 추가
}
addData();
}
</script>
</body>
</html>실행 결과
728x90
반응형
'Programming > JavaScript' 카테고리의 다른 글
| [JavaScript] 자바스크립트 웹 출력하기 | 민민의 하드디스크 - 티스토리 (0) | 2023.05.15 |
|---|---|
| [JavaScript] 자바스크립트 심볼(Symbol)이란? | 민민의 하드디스크 - 티스토리 (0) | 2023.05.14 |
| HTML, CSS 버튼 디자인 | 민민의 하드디스크 - 티스토리 (0) | 2023.05.12 |
| [JavaScript] JavaScript에서 Map과 Object | 민민의 하드디스크 - 티스토리 (0) | 2023.05.09 |
| [JavaScript] 자바스크립트에서 Script 태그 불러오기 | 민민의 하드디스크 - 티스토리 (0) | 2023.04.24 |
