<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>실시간 업비트 거래량 차트</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
:root {
--bg-primary: #0a0e27;
--bg-secondary: #151932;
--bg-tertiary: #1e2742;
--bg-card: #1a1f3a;
--bg-hover: #252b4a;
--bg-border: #2a3458;
--text-primary: #e2e8f0;
--text-secondary: #94a3b8;
--text-muted: #64748b;
--accent-primary: #3b82f6;
--warning: #ffb300;
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
}
body {
margin: 0;
padding: 0;
background: linear-gradient(135deg, var(--bg-primary) 0%, #0f172a 100%);
color: var(--text-primary);
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Malgun Gothic', 'Roboto', sans-serif;
}
header {
padding: 16px 20px;
background: var(--bg-card);
border-bottom: 1px solid var(--bg-border);
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: var(--shadow-lg);
}
h2 {
margin: 0;
font-size: 22px;
font-weight: 700;
color: var(--text-primary);
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
select {
background: rgba(15, 21, 37, 0.5);
color: rgba(226, 232, 240, 0.6);
padding: 8px 12px;
border: 1px solid rgba(42, 52, 88, 0.5);
border-radius: 8px;
font-size: 12px;
cursor: pointer;
transition: all 0.2s ease;
}
select:hover {
background: rgba(18, 34, 104, 0.9);
border-color: rgba(59, 130, 246, 1)
}
select:focus {
outline: none;
border-color: rgba(59, 130, 246, 0.4);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.05);
}
#volumeBox {
margin-left: 16px;
font-size: 15px;
font-weight: bold;
color: var(--warning);
padding: 5px 16px;
background: var(--bg-tertiary);
border-radius: 8px;
border: 1px solid var(--bg-border);
}
.loading-text {
font-size: 12px;
color: rgba(226, 232, 240, 0.5);
}
#chart-wrap {
height: 700px;
padding: 20px;
background: var(--bg-secondary);
}
#chartCanvas {
width: 100%;
height: 100%;
background: linear-gradient(to bottom, #000000 0%, var(--bg-primary) 100%);
border-radius: 12px;
border: 1px solid var(--bg-border);
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
}
a {
background: rgba(15, 21, 37, 0.5);
color: rgba(148, 163, 184, 0.6);
border: 1px solid rgba(42, 52, 88, 0.5);
border-radius: 6px;
padding: 6px 12px;
font-size: 13px;
text-decoration: none;
transition: all 0.2s ease;
}
a:hover {
background: rgba(18, 34, 104, 0.6);
color: rgba(226, 232, 240, 0.8);
border-color: rgba(255, 179, 0, 0.4);
}
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: var(--bg-secondary);
border-radius: 4px;
}
::-webkit-scrollbar-thumb {
background: var(--bg-tertiary);
border-radius: 4px;
border: 2px solid var(--bg-secondary);
}
::-webkit-scrollbar-thumb:hover {
background: var(--bg-hover);
}
</style>
</head>
<body>
<?php
// ===== 업비트 마켓 목록 =====
$api = 'https://api.upbit.com/v1/market/all';
$data = json_decode(file_get_contents($api), true);
// ===== 파라미터 =====
$market = $_GET['market'] ?? 'KRW-BTC';
$chart_time = isset($_GET['time']) ? (int)$_GET['time'] : 0;
// ===== 마켓 검증 =====
$validMarket = 'KRW-BTC';
foreach ($data as $m) {
if ($m['market'] === $market && strpos($m['market'], 'KRW-') === 0) {
$validMarket = $market;
break;
}
}
?>
<header>
<h2>실시간 업비트 - 선 차트 거래량 : UI 버전</h2>
<div style="display:flex; align-items:center; gap:8px;">
<!-- 시간 버튼 (HTML 링크) -->
<a href="?market=<?= $validMarket ?>&time=1">1분</a>
<a href="?market=<?= $validMarket ?>&time=5">5분</a>
<a href="?market=<?= $validMarket ?>&time=15">15분</a>
<a href="?market=<?= $validMarket ?>&time=60">1시간</a>
<a href="?market=<?= $validMarket ?>&time=240">4시간</a>
<a href="?market=<?= $validMarket ?>&time=480">8시간</a>
<a href="?market=<?= $validMarket ?>&time=720">12시간</a>
<a href="?market=<?= $validMarket ?>&time=1440">24시간</a>
<!-- 코인 셀렉트 -->
<select onchange="location.href='?market='+this.value+'&time=<?= $chart_time ?>'">
<?php
foreach ($data as $m) {
if (strpos($m['market'], 'KRW-') !== 0) continue;
$symbol = str_replace('KRW-', '', $m['market']);
$korean = $m['korean_name'];
$selected = ($m['market'] === $validMarket) ? ' selected' : '';
echo "<option value=\"{$m['market']}\"{$selected}>{$symbol} : {$korean}</option>\n";
}
?>
</select>
<div id="volumeBox"><span class="loading-text">로딩 중...</span></div>
</div>
</header>
<div id="chart-wrap">
<canvas id="chartCanvas"></canvas>
</div>
<script>
let MARKET = "<?= $validMarket ?>";
let UNIT_MIN = <?= $chart_time ?>;
let ws = null;
const MAX_POINTS = 300;
function getLabel(unitMin) {
const d = new Date();
if (unitMin === 0) {
return d.toTimeString().split(" ")[0]; // 실시간
}
const h = String(d.getHours()).padStart(2, '0');
const mm = String(Math.floor(d.getMinutes() / unitMin) * unitMin).padStart(2, '0');
return h + ':' + mm;
}
const ctx = document.getElementById("chartCanvas").getContext("2d");
const chartData = {
labels: [],
datasets: [{
label: MARKET + " 거래량",
data: [],
borderColor: "#ffb300",
borderWidth: 2,
pointRadius: 0,
tension: 0.1
}]
};
const chart = new Chart(ctx, {
type: "line",
data: chartData,
options: {
animation:false,
responsive:true,
maintainAspectRatio:false,
scales:{
x:{ ticks:{color:"#888"}, grid:{color:"rgba(255,255,255,0.07)"} },
y:{ ticks:{color:"#ccc"}, grid:{color:"rgba(255,255,255,0.07)"} }
},
plugins:{
legend:{ labels:{color:"#ddd"} },
tooltip:{
callbacks:{
label: c => c.raw.toLocaleString() + " 수량"
}
}
}
}
});
function connectWS() {
ws = new WebSocket("wss://api.upbit.com/websocket/v1");
ws.onopen = () => {
ws.send(JSON.stringify([
{ ticket:"volume" },
{ type:"ticker", codes:[MARKET] }
]));
};
ws.onmessage = e => {
const reader = new FileReader();
reader.onload = () => {
const d = JSON.parse(reader.result);
const vol = d.acc_trade_volume_24h;
const time = getLabel(UNIT_MIN);
document.getElementById("volumeBox").innerText =
vol.toLocaleString() + " 수량";
chartData.labels.push(time);
chartData.datasets[0].data.push(vol);
if (chartData.labels.length > MAX_POINTS) {
chartData.labels.shift();
chartData.datasets[0].data.shift();
}
chart.update("none");
};
reader.readAsText(e.data);
};
}
connectWS();
</script>
</body>
</html>