[AJAX] 게시판별 그래프 그리기

결과

📌 exam1.html 수정

<!DOCTYPE html>
<!-- /chartjs/src/main/webapp/db/exam1.html  
  자유게시판 작성자 중 가장 많은 글을 작성한 7명의 데이터만 막대그래프로 출력
-->
<html>
<head>
<meta charset="UTF-8">
<title>게시글 작성자별 건수 exam1(막대그래프)</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>
</head>
<body>
<input type="button" value="공지사항" onclick="board(1)">
<input type="button" value="자유게시판" onclick="board(2)">
<input type="button" value="QNA" onclick="board(3)">

<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/exam1?id=2",
		success : function(data) {
			chart_rtn(data);
		}
	})
})
function board(id) {
	$.ajax({
		url : "/chartjs/exam1?id=" + id,
		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 : json.title + "작성건수",
				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 : json.title + '작성 건수'  //제목 내용   
	  				      } ,
	  			 scales : {
	  			     xAxes :[{ display : true,
	  			    	 scaleLabel : {
	  			    		 display : true,
	  			    		 labelString : json.title + "작성 건수"
	  			    	 },
	  			    	 ticks : {beginAtZero : true} //y축의 시작 값을 0으로 
	  			      }]	 
	  			 }	      
	  		}
	  	 })
}
</script>
</body>
</html>

📌 ExamServlet1.java 수정

package chart;

import java.io.IOException;
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.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/exam1")
public class ExamServlet1 extends HttpServlet {
	private static final long serialVersionUID = 1L;
    public ExamServlet1() {
        super();
    }
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setContentType("text/plain; charset=UTF-8");
		String id = request.getParameter("id");
		try {
			Class.forName("oracle.jdbc.driver.OracleDriver");
			Connection conn = DriverManager.getConnection("jdbc:oracle:thin:@localhost:1521:xe","kic","1234");
			String sql = "select * from (select writer, count(*) from board where boardid=? "
					+ " group by writer order by 2 desc) where rownum <8 ";
			PreparedStatement pstmt = conn.prepareStatement(sql);
			pstmt.setString(1,id);
			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());
		    String title = "공지사항";
		    if(id.equals("2")) title ="자유게시판";
		    else if(id.equals("3")) title="QAN";
		    result.put("\\"title\\"","\\""+ title+"\\"");
		    
		    PrintWriter out = response.getWriter();
		    System.out.println(result);
		    String outData = result.toString().replace("=",":");
		    out.println(outData);
		} catch(Exception e) {
			e.printStackTrace();
		}
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}

}

저작자표시 비영리 변경금지 (새창열림)

'수업(국비지원) > Ajax' 카테고리의 다른 글

[AJAX] 게시판 현황에 게시판 그래프 추가하기(kiclayout, AjaxController, ShopService, BoardDao, BoardMapper ) (0)	2023.04.21
[AJAX] 선 그래프, 파이 그래프, 도넛 그래프, barline 그래프 (0)	2023.04.21
[AJAX] 그래프 그리기 Exam (0)	2023.04.21
[AJAX] chartjs - 그래프 그리기(한글) (0)	2023.04.21
[AJAX] chartjs - 그래프 그리기 (0)	2023.04.21