- 스프링에서의 게시판 데이터에 대한 구글 차트 기능을 만들어보았습니다
1. 날짜에 대한 게시물 갯수를 통해 차트로 표현하고자 쿼리를 작성하였습니다.
SELECT
COUNT(*)AS COUNT
,TO_CHAR(REG_DATE,'YYYY-MM-DD') AS REG_DATE
FROM
SJ_HUEBOARD
WHERE
REG_DATE
BETWEEN
'20200901'
AND
'2021-10-10'
GROUP BY
TO_CHAR(REG_DATE,'YYYY-MM-DD');
2. Java 단에서 리스트를 map에 담아 json형식으로 넘기기
@RequestMapping("/ajaxchart.do")
@ResponseBody
public String deletecontent(HttpServletRequest request,AboardDTO dto) {
List<ChartDTO> list = dao.chart();
request.setAttribute("list", list);
HashMap map = new HashMap();
map.put("list",list);
String json = null;
try {
json = new ObjectMapper().writeValueAsString(map);
} catch (JsonProcessingException e) {
e.printStackTrace();
}
return json;
}
3. Jsp 화면단에서 표현하기
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ include file = "/WEB-INF/views/member/huationMain.jsp" %>
<!DOCTYPE html>
<html>
<title>chartJS</title>
<body>
<style>
#chart-container {
float: right;
position: center;
left: -50;
}
canvas {
float: right;
width: 40%;
position: right;
left: -30%;
}
</style>
<h1>게시물데이터그래프화</h1>
<canvas id="myChart" align="center"></canvas>
<canvas id="myChart2"></canvas>
<canvas id="myChart3"></canvas>
<canvas id="myChart4"></canvas>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>
<script>
//차트 색상 랜덤
$(function() {
function randomColor(labels) {
var colors = [];
for (let i = 0; i < labels.length; i++) {
colors.push("#" + Math.round(Math.random() * 0xffffff).toString(16));
}
return colors;
}
function makeChart(ctx, type, labels, data) {
var myChart = new Chart(ctx, {
type: type,
data: {
labels: labels,
datasets: [{
label: '날짜별 게시글 등록 수',
data: data,
backgroundColor: randomColor(labels)
}]
},
options: {
responsive: false,
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
}
$.ajax({
type: "GET",
url: "ajaxchart.do",
dataType : "json",
success: function(data, status, xhr) {
console.log(data);
var labels = [];
var myData = [];
//맵안에 list 였으니 for문으로 돌린다
$.each(data.list,function (k,v){
labels.push(v.reg_date);
myData.push(v.count);
});
var newLabels = labels.slice(-5);
var newMyData = myData.slice(-5);
// Chart.js 막대그래프 그리기
var ctx = $('#myChart');
makeChart(ctx, 'bar', newLabels, newMyData);
// Chart.js 선그래프 그리기
ctx = $('#myChart2');
makeChart(ctx, 'line', newLabels, newMyData);
// Chart.js 원그래프 그리기
ctx = $('#myChart3');
makeChart(ctx, 'pie', newLabels, newMyData);
ctx = $('#myChart4');
makeChart(ctx, 'doughnut', newLabels, newMyData);
}
});
});
</script>
</body>
</html>
'Java' 카테고리의 다른 글
| Java main 메서드 실행하기(F11) (0) | 2024.02.12 |
|---|---|
| Spring - Java 로 워드클라우드(Wordcloud) 기능 만들기(d3.js) (0) | 2021.02.02 |
댓글