백엔드/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번까지 제대로 나오는 것을 확인)
