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

Chart.js 

https://www.chartjs.org/

Chart.js

메인페이지 우측 GitHub 버튼을 클릭한다

 

 

 

열린 Github 페이지 아래에 release 버튼을 클릭한다

 

 

 

원하는 방식으로 다운로드하면 된다

 

 

나는 npm, CDN 방식이 무슨 이유인지 계속 오류가 나서 직접 다운로드를 하였다

 

 

GitHub 페이지 하단에 파일을 다운로드 한다

 

 

 

chart.js 관련 파일들이 보인다

 

 

 

폴더의 다른 파일들은 필요 없고 chart.js 파일들만

resources/static 경로로 넣어준다

 

연결해서 사용할 파일은

chart.umd.js 다

 

처음 압축 파일을 다운로드 했을때 chart.js 를 사용해 보았는데 

함수가 제대로 사용되지 않았고 chart.umd.js 을 사용하니 정상 동작하였다

chart.min.js 가 없어서도 당황했는데 chart.js 마저 동작하지 않아서 삽질만 엄청했다...

 

 

 

controller

import com.sun.management.OperatingSystemMXBean;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

import java.lang.management.ManagementFactory;
import java.util.HashMap;
import java.util.Map;

@RestController
public class SystemData {

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

        Map<String, String> data = new HashMap<>();
		
        // 서버 PC 의 CPU 사용량 구하기
        OperatingSystemMXBean mxBean = ManagementFactory.getPlatformMXBean(OperatingSystemMXBean.class);
        String checkData = String.format("%.2f", mxBean.getSystemCpuLoad() * 100);

        data.put("value", checkData);
        return data;
    }
}

 

 

 

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>



<!-- Donut 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">CPU 사용량</h6>
        </div>
        <!-- Card Body -->
        <div class="card-body">
            <div class="chart-pie pt-4">
                <canvas id="myChart"></canvas>
            </div>
        </div>
    </div>
</div>

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

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

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

 

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

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

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

 

js

$(document).ready(function() {

    // 그리려고 하는 차트 canvas ID
    let ctx = $("#myChart");

    // 반도넛 중앙에 데이터 값 넣기
    const centerTextPlugin = {
        id: 'centerText',
        beforeDraw: function(chart) {
            let width = chart.width,
                height = chart.height,
                ctx = chart.ctx;

            // 상태 복원
            ctx.restore();
            let fontSize = (height / 114).toFixed(2);
            ctx.font = fontSize + "em sans-serif";
            ctx.fillStyle = 'rgba(255, 99, 132, 0.5)';
            ctx.textBaseline = "middle";

            let text = chart.data.datasets[0].data[0] + "%",
                textX = Math.round((width - ctx.measureText(text).width) / 2),
                textY = (height / 2) + 100;

            ctx.fillText(text, textX, textY);

            // 상태 저장
            ctx.save();
        }
    };

    // 전역에 플러그인을 등록시킬때 사용
    Chart.register(centerTextPlugin);

    let data = {
        datasets: [{
            data: [0, 100],
            backgroundColor: [
                'rgba(255, 99, 132, 0.5)',
                'rgba(54, 162, 235, 0.5)'
            ],
            borderWidth: 1
        }],
        labels: [
            '사용량',
            '여유량'
        ]
    };

    let options = {
        responsive: true,               // 반응형 , 캔버스 크기 조절
        maintainAspectRatio: false,     // 크기 조절될때 원본 캔버스 방향 비율 유지
        cutout: '60%',                  // 차트의 중앙 부분을 비우도록 설정
        rotation: -90,                  // 차트를 반시계 방향으로 180도 회전
        circumference: 180,             // 반도넛 형태를 만들기 위해 차트의 원둘레를 180도로 설정
        // rotation: 1 * Math.PI,       // 차트를 반시계 방향으로 180도 회전               		- 구버전에서 사용
        // circumference: 1 * Math.PI,  // 반도넛 형태를 만들기 위해 차트의 원둘레를 180도로 설정 - 구버전에서 사용
        animation: {
            duration: 1000              // 애니메이션 속도 1000 = 1초
        },
        plugins: {
            legend: {display: true}     // 범례 사용 여부
        }
    };

    let myChart = new Chart(ctx,{
        type: 'doughnut',
        data: data,
        options: options,
        plugins: [centerTextPlugin]    // 직접 추가해서 동작시킬수도 있다
    });


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

 

 

 

TEST

 

처음엔 0% 였다가 5초마다 CPU 사용량을 조회하여 차트가 실시간으로 변경된다