[SpringBoot] Chart.js 를 이용하여 실시간 바 차트 구현하기

이전글

https://greed-yb.tistory.com/270

[SpringBoot] Chart.js 를 이용하여 실시간 (반도넛)차트 구현하기

다운로드 및 적용방법은 이전글을 참고하길 바란다

 

 

 

controller

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

import java.io.File;
import java.util.HashMap;
import java.util.Map;


@RestController
public class SystemData {

    @GetMapping("/system/diskData")
    public Map<String, Long> diskData() throws Exception {

        Map<String, Long> data = new HashMap<>();
        File root = new File("/");

        Long freeDisk = Math.round(root.getUsableSpace() / Math.pow(1024 , 3));
        Long totalDisk = Math.round(root.getTotalSpace() / Math.pow(1024 , 3));

        data.put("freeDisk", freeDisk);
        data.put("totalDisk", totalDisk);
        return data;
    }

}

 

PC의 저장공간 용량을 실시간으로 조회하는 bar 차트를 만들려고 한다

 

 

 

html

<!-- Thymeleaf 적용 -->
<script th:src="@{/bootstrap/vendor/chart2/chart.umd.js}"></script>
<script th:src="@{/bootstrap/js/chart.js}"></script>


<!-- Thymeleaf 미적용 -->
<script src="/bootstrap/vendor/chart2/chart.umd.js"></script>
<script src="/bootstrap/js/chart.js"></script>


<!-- bar Chart -->
<div class="col-xl-4 col-lg-5">
    <div class="card shadow mb-4">
        <!-- Card Header - Dropdown -->
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">DISK 사용량</h6>
        </div>
        <!-- Card Body -->
        <div class="card-body">
            <div class="chart-pie pt-4">
                <canvas id="diskChart"></canvas>
            </div>
        </div>
    </div>
</div>

 

script 는 본인의 경로에 맞추면 되고

현재 Bootstrap 사용으로 인해 class에 명시된 값이 많은데

우리가 필요한 것은 <div> <canvas id="diskChart"></canvas> </div> 다

 

<script th:src="@{/bootstrap/js/chart.js}"></script> 의

chart.js 는 다운로드한 js가 아니다

html 파일명을 chart.html 로 명하였고 js 파일도 chart.js 로 명한 것임으로 착각하면 안 된다

 

 

 

js

// 그리려고 하는 차트 canvas ID
    let ctx = $("#diskChart");
    let data = {
        labels: ['사용 중 용량(G)', '총 용량(G)'],
        datasets: [
            {
                label: ['용량'],
                data: [],
                backgroundColor: ['rgba(255, 99, 132, 0.5)', 'rgba(54, 162, 235, 0.5)'],
                borderWidth: 1
            }
        ]
    };

$(document).ready(function () {
    let options = {
        responsive: true,               // 반응형 , 캔버스 크기 조절
        maintainAspectRatio: false,     // 크기 조절될때 원본 캔버스 방향 비율 유지
        animation: {
            duration: 1000              // 애니메이션 속도 1000 = 1초
        },
        plugins: {
            legend: {display: false}     // 범례 사용 여부
        }
    };


    let diskChart = new Chart(ctx, {
        type: 'bar',
        data: data,
        options: options
    });

    setInterval(function () {
        // ajax 처럼 javascript 비동기 통신 방법
        // get 이 default
        fetch('/system/diskData')
            .then(response => response.json())      // 서버 요청에 대한 응답이 왔을때 실행된다
            .then(data => {                         // 실행된 응답에 대한 데이터
                diskChart.data.datasets[0].data[0] = Number(data.freeDisk);
                diskChart.data.datasets[0].data[1] = Number(data.totalDisk);
                diskChart.update();
            });
    }, 5000); // 5초마다 실행
});

 

 

 

TEST

 

5초마다 PC의 저장공간 용량을 조회하여 차트가 실시간으로 반영된다