[Chart.js] 통계 데이터 차트 생성 (feat. 안이쁨)

목차

DB에서 통계  쿼리 실행 후 데이터를 화면단에서 차트로 표시하는 간단한 예제

---

xml

SELECT DATE_FORMAT(FRST_REG_DT, '%M') AS cond						/*조건*/
	 , COUNT(RVW_RSLT_CD) AS totalCnt 								/*전체*/		
	 , COUNT(CASE WHEN RSLT_CD = '10' THEN 1 END) AS passedCnt 		/*찬성*/	
	 , COUNT(CASE WHEN RSLT_CD = '20' THEN 1 END) AS rejectedCnt	/*거절*/
  FROM BOARD
 GROUP BY DATE_FORMAT(FRST_REG_DT, '%Y-%m')
 ORDER BY DATE_FORMAT(FRST_REG_DT, '%Y-%m')

service

public Map<String, Object> selectStatus(StatsSearchVO searchVO) {

    Map<String, Object> resultMap = new HashMap<>();
    //원본 데이터
    List<StatsVO> statsList = new ArrayList<>();
    statsList = statsMapper.selectStatus(searchVO);

    String jsonData = "";

    if (statsList != null && statsList.size() > 0) {
        //json 문자열로 변환
        jsonData = new Gson().toJson(statsList);
    }
    resultMap.put("resultList", statsList);
    resultMap.put("resultJsonData", jsonData);

    return resultMap;
}

controller

@RestContorller, @ResponseBody.. 등 무슨 방법이던 json문자열로 화면으로 넘기면 된다.

public ModelAndView selectStatus(ModelMap model, @ModelAttribute("searchVO")StatsSearchVO searchVO) {

    ModelAndView mav = new ModelAndView();

    mav.setViewName("jsonView");
    mav.addObject("resultMap", statsService.selectStatus(searchVO));

    return mav;
}

화면단

화면단에서 페이지 로드 후 아래 함수 호출

function initChart(jsonData) {
	
	// 라벨, 데이터(찬성, 거절)
	var labels = [];
	var passedCntList = [];
	var rejectedCntList = [];

	//서버에서 받은 jsonData가 있을 때만
	if (jsonData) {
		var jData = JSON.parse(jsonData);

		for (var i = 0; i < jData.length; i++) {
			var data = jData[i];
			labels.push(data.cond);
			passedCntList.push(data.passedCnt);
			rejectedCntList.push(data.rejectedCnt);
		}
	}

	//캔버스 영역
	var ctx = document.getElementById('chart1').getContext('2d');
	var config = {
		type: 'bar',
		data: {
			labels: labels,
			datasets: [{
				label: '찬성',
				backgroundColor: 'rgba(54, 162, 235, 0.5)',
				borderWidth: 0,
				data: passedCntList,
			},
				{
					label: '거절',
					backgroundColor: 'rgba(255, 99, 132, 0.5)',
					borderWidth: 0,
					data: rejectedCntList,
				}]
		},
		options: {
			scales: {
				y: {
					beginAtZero: true,
					ticks: {
						stepSize: 20 // y축 간격을 20으로 설정
					}
				}
			}
		}
	}

	//기존 차트 파괴(이거 안하면 chat.js에서 에러 발생)
    //Uncaught Error: Canvas is already in use. Chart with ID '0' must be destroyed before the canvas with ID.... 이런..에러
	if (chart) {
		chart.destroy();
	}
	//캔버스 사이즈 초기화
	var canvas = document.getElementById('chart1');
	canvas.width = 600;
	canvas.height = 200;
	//차트 객체 생성
	chart = new Chart(ctx, config);
}

결과(예시)

chat.js