GNU/_PAGE/chart/upbit/line/volume_line_basics.php
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>실시간 업비트 - 선 차트 거래량 : 베이직 버전<</title>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<style>
body {
    margin:0;
    padding:0;
    background:#0d0d0d;
    color:#f5f5f5;
    font-family:Arial, sans-serif;
}
header {
    padding:12px 16px;
    background:#111;
    border-bottom:1px solid #222;
    display:flex;
    justify-content:space-between;
    align-items:center;
}
h2 { margin:0; font-size:20px; }
select {
    background:#222;
    color:#fff;
    padding:6px 10px;
    border:1px solid #444;
    border-radius:6px;
    font-size:14px;
}
#volumeBox {
    margin-left:12px;
    font-size:17px;
    font-weight:bold;
}
.vol-up { color:#4CAF50; }
.vol-down { color:#FF5252; }
.vol-flat { color:#ccc; }

#chart-wrap { height:calc(100vh - 70px); padding:10px; }
#chartCanvas { width:100%; height:100%; }
</style>
</head>

<body>

<header>
<h2>실시간 업비트 - 선 차트 거래량 : 베이직 버전</h2>
<div style="display:flex; align-items:center;">
    <select id="coinSelect">
        <option value="KRW-BTC">BTC</option>
        <option value="KRW-ETH">ETH</option>
        <option value="KRW-XRP">XRP</option>
        <option value="KRW-SOL">SOL</option>
        <option value="KRW-DOGE">DOGE</option>
        <option value="KRW-BCH">BCH</option>
        <option value="KRW-ETC">ETC</option>
        <option value="KRW-QTUM">QTUM</option>
        <option value="KRW-TRUMP">TRUMP</option>
    </select>
    <div id="volumeBox" class="vol-flat">거래량 불러오는 중...</div>
</div>
</header>

<div id="chart-wrap">
<canvas id="chartCanvas"></canvas>
</div>

<script>
let MARKET = document.getElementById("coinSelect").value;
let ws = null;
let lastVolume = null;
const MAX_POINTS = 300;

const ctx = document.getElementById("chartCanvas").getContext("2d");

const chartData = {
    labels: [],
    datasets: [{
        label: MARKET + " 24H 거래량",
        data: [],
        borderColor: "#ffb300",
        borderWidth: 2,
        pointRadius: 0,
        tension: 0.1
    }]
};

const lineChart = 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() {
    if (ws) ws.close();
    ws = new WebSocket("wss://api.upbit.com/websocket/v1");

    ws.onopen = () => {
        ws.send(JSON.stringify([
            { ticket:"volume-chart" },
            { 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 now = new Date().toTimeString().split(" ")[0];

            updateVolumeBox(vol);
            updateChart(now, vol);
        };
        reader.readAsText(e.data);
    };
}

function updateVolumeBox(vol) {
    const box = document.getElementById("volumeBox");

    if (lastVolume === null) box.className = "vol-flat";
    else if (vol > lastVolume) box.className = "vol-up";
    else if (vol < lastVolume) box.className = "vol-down";
    else box.className = "vol-flat";

    box.innerText = vol.toLocaleString() + " 수량";
    lastVolume = vol;
}

function updateChart(time, vol) {
    chartData.labels.push(time);
    chartData.datasets[0].data.push(vol);

    if (chartData.labels.length > MAX_POINTS) {
        chartData.labels.shift();
        chartData.datasets[0].data.shift();
    }
    lineChart.update("none");
}

document.getElementById("coinSelect").addEventListener("change", function(){
    MARKET = this.value;
    lastVolume = null;
    chartData.labels = [];
    chartData.datasets[0].data = [];
    chartData.datasets[0].label = MARKET + " 24H 거래량";
    lineChart.update();
    connectWS();
});

connectWS();
</script>

</body>
</html>