안녕하세요 오늘은 CoinGecko API 와 chart api를 사용하여 암호화폐 시장 데이터를 실시간으로 받아와 차트로 시각화 해보겠습니다.
다음은 index.html 의 코드입니다
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 기본 HTML 헤드 설정 -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Crypto Market Data</title>
<!-- Tailwind CSS 연결 -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Chart.js 라이브러리 추가 -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<!-- JavaScript 파일 연결 -->
<script defer src="script.js"></script>
</head>
<body class="bg-gray-100 flex justify-center items-center h-screen">
<!-- 컨테이너 -->
<div class="container">
<h1 class="text-xl font-bold mb-4">Crypto Market Data</h1>
<!-- 드롭다운 메뉴 -->
<select id="crypto-select" class="border p-2 rounded">
<option value="bitcoin">Bitcoin</option>
<option value="ethereum">Ethereum</option>
<option value="litecoin">Litecoin</option>
</select>
<!-- 데이터 표시 버튼 -->
<button id="show-data" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded ml-2">
Show Data
</button>
<!-- 데이터 표시 영역 -->
<div id="data-display" class="mt-4"></div>
<canvas id="crypto-chart" width="400" height="400"></canvas>
</div>
</body>
</html>
다음은 script.js 의 코드입니다.
// 전역 변수로 차트 인스턴스를 저장
let myChart;
document.getElementById('show-data').addEventListener('click', async () => {
const cryptoCurrency = document.getElementById('crypto-select').value;
const ctx = document.getElementById('crypto-chart').getContext('2d');
try {
const response = await fetch(`https://api.coingecko.com/api/v3/coins/${cryptoCurrency}`);
const data = await response.json();
// 필요한 데이터 추출
const priceChange = data.market_data.price_change_percentage_24h;
const marketCap = data.market_data.market_cap.usd;
const volume = data.market_data.total_volume.usd;
// 기존 차트가 존재하면 파괴
if (myChart) {
myChart.destroy();
}
// 차트 데이터 준비
const chartData = {
labels: ['24h Price Change', 'Market Cap', '24h Volume'],
datasets: [{
label: `${cryptoCurrency} Market Data`,
data: [priceChange, marketCap, volume],
backgroundColor: ['rgba(255, 99, 132d, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)'],
borderColor: ['rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)'],
borderWidth: 1
}]
};
// 새로운 차트 생성
myChart = new Chart(ctx, {
type: 'bar',
data: chartData,
options: {
scales: {
y: {
beginAtZero: true // Y축이 0부터 시작하도록 설정
}
}
}
});
} catch (error) {
console.error('Error fetching market data:', error);
}
});
위와 같이 코드를 작성하면 다음과 같은 결과를 확인할 수 있습니다.
'JavaScript' 카테고리의 다른 글
| [JavaScript] 리뷰 만들기 (0) | 2024.03.23 |
|---|---|
| [JavaScript] Bootstrap 버튼 클릭 스크롤 위치 이동 기능 만들기 (0) | 2024.03.22 |
| [JavaScript] 카운터 만들기 (0) | 2024.03.17 |
| [JavaScript] 웹페이지 로딩화면 (0) | 2024.03.14 |
| [JavaScript] CoinGecko API를 사용하여 현재 특정 가상화폐의 KRW 가격을 조회하여 나타내기 (0) | 2024.03.10 |
