수업(국비지원)/Ajax
[AJAX] chartjs - 그래프 그리기
byeolsub
2023. 4. 21. 22:51
- 막대그래프 그리기
📌 barex1.html 생성
<!DOCTYPE html>
<!-- /chartjs1/src/main/webapp/barex1.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>
<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">
// 배열로 설정
const MONTHS = ["1월","2월","3월","4월","5월","6월","7월","8월","9월","10월","11월","12월"]
//막대그래프에 표시한 데이터 객체
const barChartData = {
labels : MONTHS, //x축데이터
datasets : [ //데이터 영역.
{ //막대 그래프 한개
label : '영업부실적', //막대그래프 설명. 범례에 표시됨
backgroundColor :"#FF90FF", //막대그래프색상 설정
borderColor : "#000000", //막대 테두리 색상 설정
borderWidth : 1, //막대 테두리 굵기 설정
data:[10,15,25,55,-25,35,65,55,28,43,68,30] //막대의 값
},
{ //막대 그래프 한개
label : '총무부실적',
backgroundColor :"#0000FF",
borderColor : "#0000FF",
borderWidth : 1,
data:[1,5,5,15,-5,15,25,5,38,23,58,20]
}
]
}
//화면 준비 완료.
window.onload =function(){
let ctx = document.getElementById("canvas").getContext("2d") //그래프 출력 영역
//막대 그래프 출력
new Chart(ctx,{
type : 'bar', //막대그래프로 표시
data : barChartData, //막대그래프로 출력될 데이터 객체
options : {
responsive : true, //반응형 웹형태로
//top,left,right,bottom
legend : {position : 'top'}, //범례의 위치
title : { display : true, //제목출력
text : '막대 그래프 연습' //제목 내용
}
}
})
}
</script>
</body>
</html>
- 게시판 글 통계(막대 그래프 표시)
📌 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);
let ctx = document.getElementById("canvas");
let json = JSON.parse(data);
let datas = json.data;
let writers = json.writers;
let colors = []
$.each(datas, function(i,item) {
colors[i] = randomColor(1)
})
let barChartData = {
labels : writers,
datasets : [{
lable : "게시판 작성건수",
data : datas,
backgroundColor : colors
}]
}
new Chart(ctx,{
type : 'bar', //막대그래프로 표시
data : barChartData, //막대그래프로 출력될 데이터 객체
options : {
responsive : true, //반응형 웹형태로
//top,left,right,bottom
legend : {position : 'top'}, //범례의 위치
title : { display : true, //제목출력
text : '게시판 작성 건수' //제목 내용
}
}
})
}
</script>
</body>
</html>
📌 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;
@WebServlet("/select")
public class SelectServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
public SelectServlet() {
super();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) {
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()) {
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.append("[");
for(int i=0;i<list1.size();i++) {
writers.append("\\"" + list1.get(i) + "\\""
+ (i == list1.size()-1?"":","));
}
writers.append("]");
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("=",":");
response.setContentType("text/plain; charset=UTF-8");
out.println(outData);
} catch(Exception e) {
e.printStackTrace();
}
}
}