본문 바로가기
수업(국비지원)/Ajax

[AJAX] 선 그래프, 파이 그래프, 도넛 그래프, barline 그래프

by byeolsub 2023. 4. 21.
  • 선 그래프

 📌 line1.html 생성

<!DOCTYPE html>
<!-- /chartjs/src/main/webapp/db/line1.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 char_rtn(data) {
	let cxt = document.getElementById("canvas")
	let json = JSON.parse(data);
	console.log(data)
	let datas = json.datas
	let writers = json.writers;
	let colors = []
	$.each(datas,function(i,item) {
		colors[i] = randomColor(1)
	})
	const lineCharData = {
		labels : writers,
		datasets :[{
			fill : false, //선 하단의 영역을 색칠하지 않는다는 표시
//			borderColor :"#FF90FF", //선의 색상.
			borderColor : colors, //각 지점의 색상을 달리 설정 가능
			boardWidth : 1, //선의 굵기
			data : datas
		}]
	}
	new Chart(cxt,{
		type : 'line', //그래프의 종류
		data : lineCharData,
		options : {
			response : true, 
			legend : {display : false},
			title : {display : true, text : '게시판 작성자별 건수'},
			scales :{
				xAxes :[{
					scaleLabel : {labelString : "작성자", display : true}
				}],
				yAxes :[{
					scaleLabel : {labelString : "게시판 등록 건수", display : true},
				    ticks : {beginAtzero : true}
				}]
			}
		}
	})
}
</script>
</body>
</html>
  • 파이 그래프

📌 pie1.html 생성

<!DOCTYPE html>
<!-- /chartjs/src/main/webapp/db/pie1.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 char_rtn(data) {
	let cxt = document.getElementById("canvas")
	let json = JSON.parse(data);
	console.log(data)
	let datas = json.datas
	let writers = json.writers;
	let colors = []
	$.each(datas,function(i,item) {
		colors[i] = randomColor(1)
	})
	const pieCharData = {
		labels : writers,
		datasets :[{
			backgroundColor : colors,
			data : datas
		}]
	}
	new Chart(cxt,{
		type : 'pie', //그래프의 종류
		data : pieCharData,
		options : {
			response : true, 
			legend : {display : false},
			title : {display : true, text : '게시판 작성자별 건수'},
			}
	})
}
</script>
</body>
</html>
  • 도넛 그래프

📌

<!DOCTYPE html>
<!-- /chartjs/src/main/webapp/db/pie1.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 char_rtn(data) {
	let cxt = document.getElementById("canvas")
	let json = JSON.parse(data);
	console.log(data)
	let datas = json.datas
	let writers = json.writers;
	let colors = []
	$.each(datas,function(i,item) {
		colors[i] = randomColor(1)
	})
	const pieCharData = {
		labels : writers,
		datasets :[{
			backgroundColor : colors,
			data : datas
		}]
	}
	new Chart(cxt,{
		type : 'doughnut', //그래프의 종류
		data : pieCharData,
		options : {
			response : true, 
			legend : {display : false},
			title : {display : true, text : '게시판 작성자별 건수'},
			}
	})
}
</script>
</body>
</html>
  • barline 그래프

📌 barline1.html 생성

<!DOCTYPE html>
<!-- /chartjs/src/main/webapp/db/barline1.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>
</div>
<script type="text/javascript">
 let randomColorFactor = function() {
	 return Math.round(Math.random() * 255);
 }
 let randomColor = function(opacity) {
	 return "rgba(" + randomColorFactor() +","
			 + randomColorFactor() + ","
			 + randomColorFactor() + ","
			 + (opacity || ".3") + ")";
 }
 $(function() {
	 $.ajax({
		 url : "/chartjs/select",
		 success : function(data) {
			 chart_rtn(data);
		 }
	 })
 })
 function chart_rtn(data) {
	 console.log(data)
	 let cxt = document.getElementById("canvas")
	 let json = JSON.parse(data);
	 let datas = json.datas
	 let writers = json.writers;
	 let colors = []
	 $.each(datas, function(i,item) {
		 colors[i] = randomColor(1)
	 })
	 const chartData = {
		 labels : writers,
		 datasets : [
			 { type :"line",
			   borderWidth :2,
			   borderColor : randomColor(1),
			   label : "건수",
			   fill : false,
			   data : datas
			 },
			 { type : "bar",
			   label : "건수",
			   backgroundColor : colors,
			   borderWidth : 2,
			   data : datas
			 }
		 ]
	 }
	 new Chart(cxt, {
		 type : 'bar',
		 data : chartData,
		 options : {
			 responsive : true,
			 title : {display : true, text : "게시판 등록 건수"},
			 legend : {display : false},
			 scales : {
				 xAxes : [{display : true,
					 scaleLabel : {display : true, labelString : "작성자"}}],
				 yAxes : [{
					 scaleLabel : {display : true, labelString : "작성건수"},
					 ticks : {beginAtZero : true}
				 }]
			 }
		 }
	 })
 }
</script>
</body>
</html>
 

 

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

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

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

관련글

티스토리툴바