- 결과
📌 SelectServlet 내용 변경
package chart;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
//http://localhost:8088/chartjs/select
@WebServlet("/select")
public class SelectServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
public SelectServlet() {
super();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) {
**response.setContentType("text/plain; charset=UTF-8");**
try {
Class.forName("oracle.jdbc.driver.OracleDriver");
Connection conn = DriverManager.getConnection("jdbc:oracle:thin:@localhost:1521:xe","kic","1234");
String sql = "select writer, count(*) from board group by writer";
PreparedStatement pstmt = conn.prepareStatement(sql);
ResultSet rs = pstmt.executeQuery();
Map<String, Integer> map = new HashMap<>();
while (rs.next()) {
//rs.getString() : writer 컬럼값
//rs.getInt() : count(*)값
map.put(rs.getString(1),rs.getInt(2));
}
List<String> list1 = new ArrayList<>(); //글쓴이(작성자) 데이터
List<Integer> list2 = new ArrayList<>(); //건수 데이터
for(Map.Entry<String, Integer> e : map.entrySet()) {
list1.add(e.getKey()); //글쓴이 정보들만 리스트로 저장
list2.add(e.getValue()); //건수정보들만 리스트로 저장
}
Map<String, String> result = new HashMap<>();
StringBuilder writers = new StringBuilder();
StringBuilder datas = new StringBuilder();
/*
* writers :
* ["홍길동","김삿갓","이몽룡"] =>자바스크립트의 배열값
*/
writers.append("[");
for(int i=0;i<list1.size();i++) {
writers.append("\\"" + list1.get(i) + "\\""
+ (i == list1.size()-1?"":","));
}
writers.append("]");
/*
* datas :
* [3,5,7] =>자바스크립트의 배열값
*/
datas.append("[");
for(int i=0;i<list2.size();i++) {
datas.append(list2.get(i) + (i == list2.size()-1?"":","));
}
datas.append("]");
result.put("\\"writers\\"", writers.toString());
result.put("\\"datas\\"", datas.toString());
//브라우저로 전송 할 출력스트림을 가져오는
PrintWriter out = response.getWriter();
System.out.println(result);
String outData = result.toString().replace("=",":");
//{"writers":["9","이몽룡","10"], "datas":[1,1,3]
out.println(outData);
} catch(Exception e) {
e.printStackTrace();
}
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) {
}
}
📌 bar1.html 수정
<!DOCTYPE html>
<!-- /chartjs/src/main/webapp/db/bar1.html -->
<html>
<head>
<meta charset="UTF-8">
<title>게시글 작성자별 건수(막대그래프)</title>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
/* 도화지 : 그림을 그려주는 영역 */
canvas { /* 글씨등이 선택 되지 않도록 설정 */
-moz-user-select : none; /* 파이어폭스 브라우저 */
-webkit-user-select : none; /* 사파리 브라우저 */
-ms-user-select : none; /* IE 브라우저 */
user-select : none; /* 표준 브라우저 */
}
</style>
</head>
<body>
<div id="container" style="width:95%;">
<canvas id="canvas"></canvas> <!-- chartjs에 의해 그래프 출력 영역 -->
</div>
<script type="text/javascript">
let randomColorFactor = function() {
return Math.round(Math.random() * 255); //0~255사이의 임의의 값
}
let randomColor = function(opacity) { //실행 할때 마다 다른 색상이 표시될 수 있도록.
//rgba(red,green,blue,opacity(투명도))
return "rgba(" + randomColorFactor() +","
+ randomColorFactor() + ","
+ randomColorFactor() + ","
+ (opacity || '.3') + ")"; // 투명도 : 1 = 불투명, 0 = 투명
};
$(function() {
$.ajax({
url : "/chartjs/select",
success : function(data) {
chart_rtn(data);
}
})
})
function chart_rtn(data) {
console.log(data);//{"writers":["9","이몽룡","10"], "datas":[1,1,3]
let ctx = document.getElementById("canvas");
let json = JSON.parse(data);
//{"datas" : [...], "writers":[...]}
let datas = json.datas; //배열 . 등록건수 값의 목록
let writers = json.writers; //배열. 글쓴이 목록
let colors = []
$.each(datas, function(i,item) {
colors[i] = randomColor(1)
})
let barChartData = {
labels : writers, //x축의 값.
datasets : [{
lable : "게시판 작성건수",
data : datas, //y축의 값.
backgroundColor : colors
}]
}
//그래프 작성.
//ctx : 그래프 작성 영역 부분. canvas 태그 영역
new Chart(ctx,{
type : 'bar', //막대그래프로 표시
data : barChartData, //막대그래프로 출력될 데이터 객체
options : {
responsive : true, //반응형 웹형태로
//top,left,right,bottom
legend : {position : 'top'}, //범례의 위치
title : { display : true, //제목출력
text : '게시판 작성 건수' //제목 내용
} ,
scales : {
xAxes :[{ display : true,
scaleLabel : {
display : true,
labelString : "게시물 작성 건수"
},
ticks : {beginAtZero : true} //y축의 시작 값을 0으로
}]
}
}
})
}
</script>
</body>
</html>
'수업(국비지원) > Ajax' 카테고리의 다른 글
| [AJAX] 게시판별 그래프 그리기 (0) | 2023.04.21 |
|---|---|
| [AJAX] 그래프 그리기 Exam (0) | 2023.04.21 |
| [AJAX] chartjs - 그래프 그리기 (0) | 2023.04.21 |
| [AJAX] Exam 시도군 선택 (0) | 2023.04.21 |
| [AJAX] ajax - jquery 이용한 시,군,구 선택 (0) | 2023.04.21 |
