백엔드/java

설문조사 결과 chart.js로 차트 띄우기 - 도넛 차트

ssoyul 2024. 4. 22. 17:02

 

 

이곳에 많은 예제가 있다. 그 중에서 도넛 차트를 가져와보자.

 

10 Chart.js example charts to get you started

A list of 10 graphs (bar chart, pie, line, etc.) with data set up to render charts that you can copy and paste into your projects

tobiasahlin.com

 

 

 

1. CDN 방식으로 chart.js 사용

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>

 

 

2. chart 영역 생성

<canvas id="doughnut-chart" width="300" height="250"></canvas>

 

 

3. 기본 차트 생성

//JavaScript
new Chart(document.getElementById("doughnut-chart"), {
    type: 'doughnut',
    data: {
      labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
      datasets: [
        {
          label: "Population (millions)",
          backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
          data: [2478,5267,734,784,433]
        }
      ]
    },
    options: {
      title: {
        display: true,
        text: 'Predicted world population (millions) in 2050'
      }
    }
});

 

4. 생성된 차트를 볼 수 있음

 

 


 

이클립스에서 적용하기

 

 

1. CDN으로 불러오기

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>

 

 

2. jsp 부분 생성

<div id="resultSrvy" style="margin-top: 40px;">
    <div>
    	<canvas id="doughnut-chart"></canvas>
    </div>
</div>

 

 

3. 매퍼 생성

<!-- 설문조사 결과 조회 (0~10번까지) -->
<select id="srvyResult" resultType="kr.-.-.-.model.SurveyMgtVo">
    SELECT 
        st.lec_id
        , sq.que
        , st.que_num
        , le.lec_name
        , SUM(CASE WHEN st.review_num = 1 THEN 1 ELSE 0 END) AS review_num_1
        , SUM(CASE WHEN st.review_num = 2 THEN 1 ELSE 0 END) AS review_num_2
        , SUM(CASE WHEN st.review_num = 3 THEN 1 ELSE 0 END) AS review_num_3
        , SUM(CASE WHEN st.review_num = 4 THEN 1 ELSE 0 END) AS review_num_4
        , SUM(CASE WHEN st.review_num = 5 THEN 1 ELSE 0 END) AS review_num_5
    FROM 
        tb_srvy_std st
    INNER JOIN
        tb_lec_info le ON st.lec_id = le.lec_id
    INNER JOIN
        tb_srvy_que sq ON st.que_num = sq.que_num
    WHERE
        st.lec_id = #{lec_id} AND st.que_num BETWEEN 0 AND 10
    GROUP BY 
        st.lec_id
        , st.que_num
</select>

 

 

4. js 부분 수정

function showChart(data) {
    console.log("showChart 값 확인 : ", data.resultNumList);
    console.log("주관식 값 확인 : ", data.resultList);
    showList(data.resultList);
    //const ctx = document.getElementById('doughnut-chart').getContext('2d');
    // result 함수 실행했을 때 현재 함수가 계속 반복해서 나타나니 그걸 빈값으로 바꿔준 다음 불러오게 하는 장치
    // 잘 실행되는데 오류가 난당.. 안 쓰는 ctx 주석하니 됨
    var resultSrvyGraph = document.getElementById("resultSrvy");
    // 다른 차트를 눌렀을 때 이전에 데이터가 담겨있던 걸 비워줌
    resultSrvyGraph.innerHTML = "";

    // 각 질문에 대해 차트 생성
    data.resultNumList.forEach(function(data) {
        const srvyResultData = data;

        // 새로운 canvas 엘리먼트 생성
        var canvas = document.createElement('canvas');
        // body.getElementById 쓰면 <body> 태그 가장 하단에 추가가 되어 항상 마지막 단에 만들어지니까 새로운 div를 생성해서 그 안에 넣어줘야 한다
        resultSrvyGraph.appendChild(canvas);

        var myChart = new Chart(canvas.getContext('2d'), {
            type: 'doughnut',
            data: {
                labels: ["매우 그렇다", "그렇다", "보통이다", "그렇지 않다", "매우 그렇지 않다"],
                datasets: [{
                    label: srvyResultData.lec_name,
                    backgroundColor: ["#70fff3", "#b3ff70", "#fff170", "#ffb870", "#ff7070"],
                    data: [
                                srvyResultData.review_num_5
                                , srvyResultData.review_num_4
                                , srvyResultData.review_num_3
                                , srvyResultData.review_num_2
                                , srvyResultData.review_num_1
                           ],
                    borderWidth: 1
                }]
            },
            options: {
                title: {
                    display: true,
                    text: (srvyResultData.que_num + 1) + "번. " + srvyResultData.que,
                },
                // css를 위한 설정
                responsive: true,
                layout: {
                    padding: {
                        bottom: 50
                    }
                },
            }
        });
    });
}

 

 

4. 컨트롤러 생성

@RequestMapping("/surveyResult")
@ResponseBody
public Map<String, Object> surveyResult(Model model, @RequestParam Map<String, Object> paramMap,
                                HttpServletRequest request, HttpServletResponse response, HttpSession session) throws Exception{

    logger.info("+ Start " + className + ".surveyResult");
    logger.info("   - paramMap : " + paramMap);

    int lec_id = Integer.parseInt(paramMap.get("lec_id").toString());

    List<SurveyMgtVo> resultNumList = srvyMgtService.srvyResult(paramMap);
    List<SurveyMgtVo> resultList = srvyMgtService.srvyResultLast(paramMap);

    logger.info("+ End " + className + ".surveyResult");

    Map<String, Object> resultMap = new HashMap<>();

    resultMap.put("resultNumList", resultNumList);
    resultMap.put("resultList", resultList);

    return resultMap;
}

 

 

결과 화면 (11번까지 제대로 나오는 것을 확인)