카테고리 없음
선 차트 ( 비동기 통신 )
주먀
2023. 6. 8. 14:06
1. 페이지에서 f12 -> jsp에서 선 클래스 찾기 -> chart-area-demo.js 경로 -> javacsript 에서 chart-area-demo.js 파일 열기
2. mysql
SELECT MONTH(BRDCST_DE) AS DE, ROUND(AVG(WTCHNG_RT),3)
FROM COM.BROADCAST
WHERE PROGRAM_NM = '뮤직뱅크'
GROUP BY DE;
3. JavaScript
3-1. 중괄호는 객체 , 대괄호는 배열
3-2. 웹 페이지 콘솔 안뜨면 -> 새로고침 우클릭 캐시 비우기
// vs코드에서 수정후에 반드시 ctrl+s 저장하기!!
// eclipse로 돌아가서 해당하는 파일을 다시한번 열어주기!
// 링크 클릭, 버튼 클릭, 페이지 변환이 일어나면서 데이터 응답 --> 동기통신
// 비동기통신방식으로 DB에서 데이터를 조회해와서 차트를 그리기!
// --> $.ajax()
// 문법
$(function () {
$.ajax({
// 1) 어디로 요청을 보내야하는지
url: 'getMonthData',
// 2) 보내줄 값이 있는지
// data : '있을 때만 사용'
// 3) 받아올 결과값의 자료형 지정
dataType: 'json',
// 4) 성공했을 떄 실행할 함수
success: function (res) {
// 1. labels에 들어갈 수 있는 배열을 하나 생성
let monthData = [];
// 3. data에 들어갈수 있는 배열을 하나 생성
let wtchngData = [];
// 2. 배열에 res안에 들어있는 brdcst_de라는 데이터를 하나씩 추가(배열의 길이만큼 반복)
for(let i =0; i<res.length; i++){
monthData.push(res[i].brdcst_de);
console.log(res[i].brdcst_de);
console.log(res[i].wtchng_rt);
// 4. 배열에 res안에 들어있는 wtchng_rt라는 데이터를 하나씩 추가
wtchngData.push(res[i].wtchng_rt);
}
// 5. 차트그리는 전체 코드를 함수로 만들고, 함수를 사용해서 배열 2개를 매개변수로 넘기기
makeAreaChart(monthData, wtchngData);
},
// 5) 실패했을 때 실행할 함수
error: function () {
console.log('실패ㅠ')
}
})
});
// Set new default font family and font color to mimic Bootstrap's default styling
Chart.defaults.global.defaultFontFamily = 'Nunito', '-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif';
Chart.defaults.global.defaultFontColor = '#858796';
function makeAreaChart(monthData, wtchngData){
var ctx = document.getElementById("myAreaChart");
var myLineChart = new Chart(ctx, {
type: 'line',
data: {
// x축 라벨(DB에서 조회한 값으로 수정)
labels: monthData,
datasets: [{
label: "Earnings",
lineTension: 0.3,
backgroundColor: "rgba(78, 115, 223, 0.05)",
borderColor: "rgba(78, 115, 223, 1)",
pointRadius: 3,
pointBackgroundColor: "rgba(78, 115, 223, 1)",
pointBorderColor: "rgba(78, 115, 223, 1)",
pointHoverRadius: 3,
pointHoverBackgroundColor: "rgba(78, 115, 223, 1)",
pointHoverBorderColor: "rgba(78, 115, 223, 1)",
pointHitRadius: 10,
pointBorderWidth: 2,
// data에 DB에서 월별 전체 시청률 조회한 값 가져오기
data: wtchngData,
}],
},
options: {
maintainAspectRatio: false,
layout: {
padding: {
left: 10,
right: 25,
top: 25,
bottom: 0
}
},
scales: {
xAxes: [{
time: {
unit: 'date'
},
gridLines: {
display: false,
drawBorder: false
},
ticks: {
maxTicksLimit: 7
}
}],
yAxes: [{
ticks: {
maxTicksLimit: 5,
padding: 10,
},
gridLines: {
color: "rgb(234, 236, 244)",
zeroLineColor: "rgb(234, 236, 244)",
drawBorder: false,
borderDash: [2],
zeroLineBorderDash: [2]
}
}],
},
legend: {
display: false
},
tooltips: {
backgroundColor: "rgb(255,255,255)",
bodyFontColor: "#858796",
titleMarginBottom: 10,
titleFontColor: '#6e707e',
titleFontSize: 14,
borderColor: '#dddfeb',
borderWidth: 1,
xPadding: 15,
yPadding: 15,
displayColors: false,
intersect: false,
mode: 'index',
caretPadding: 10,
}
}
});
}
4. Controller
package kr.smhrd.controller;
import java.util.ArrayList;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import kr.smhrd.entity.BroadCast;
import kr.smhrd.mapper.BroadCastMapper;
@Controller // 1) 클래스파일이 Controller(POJO)임을 알려주기
public class BroadCastController {
// Mapper 인터페이스 사용할 수 잇게끔 연결
@Autowired
private BroadCastMapper mapper;
@RequestMapping("/") // 2) url mapping을 "/"로 들어왔을 떄 잡아주기
public String index(Model model) {
// db에서 데이터 조회하기
BroadCast vo = mapper.getRating();
model.addAttribute("vo", vo);
return "index";
// 3) /로 들어왔을 때 index.jsp 페이지를 forward방식으로 되돌려주기
}
// 월별 데이터 조회할 수 있는 url
@GetMapping("/getMonthData")
public @ResponseBody ArrayList<BroadCast> getMonthData() {
// @ResponseBody --> 비동기 통신으로 요청이 들어왔을 때
// --> 반환하는 결과값이 페이지 이름이 아니라,
// --> 웹 화면에 출력해야하는 결과값임을 나타내는 annotation
// ajax(비동기) 요청이 들어왔을 때, 결과값을 반환하려면 웹페이지 화면에 출력!
System.out.println("요청이 들어오니?");
// 1. db에서 월별 전체시청률 평균 조회해오기
ArrayList<BroadCast> result = mapper.getMonthData();
// 2. 조회한 결과값을 return 반환 시켜주기
return result;
// 만약에 객체, ArrayList 복잡한 형태를 화면에 출력하려면???
// --> jsp/servlet --> Gson 라이브러리 사용
// --> spring framework --> jackson-databind 라이브러리 사용(자동으로 결과값을 convert)
}
}
5. 메이븐 jackson 2.14.2 버전 다운 -> pom.xml 로드
비동기통신이 완료 -> 차트 그리기
6. BroadCastMapper.java
package kr.smhrd.mapper;
import java.util.ArrayList;
import kr.smhrd.entity.BroadCast;
// @Mapper ---> 생략가능
public interface BroadCastMapper {
// 남/여/전체 시청률 평균을 조회하는 기능
// 조회한 결과 행이 하나이기 때문에 BroadCast로 받아오기!
// session.selectOne();
public BroadCast getRating();
public ArrayList<BroadCast> getMonthData();
}
7. BroadCastMapper.xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="kr.smhrd.mapper.BroadCastMapper">
<select id="getRating" resultType="kr.smhrd.entity.BroadCast">
SELECT
PROGRAM_NM,
ROUND( AVG (
MALE_RT ) , 3 ) AS MALE_RT,
ROUND ( AVG( FEMALE_RT ) , 3 ) AS
FEMALE_RT,
ROUND ( AVG( WTCHNG_RT ) , 3 ) AS WTCHNG_RT
FROM
COM.BROADCAST
WHERE PROGRAM_NM = '뮤직뱅크';
</select>
<!-- DB에서 조회해 온 결과값의 column과
객체의 필드명이 서로 달랐을 때 사용할 수 있는 resultMap -->
<!-- id : resultMap의 이름(변수명) 정하는 attribute
type : 내가 표현하고 싶은 객체(자료형)
-->
<resultMap type="kr.smhrd.entity.BroadCast" id="monthData">
<!-- colunm : 조회해온 column 명칭 / property : 객체의 필드명 -->
<result column="DE" property="brdcst_de"/>
<result column="RT" property="wtchng_rt"/>
</resultMap>
<!-- 2) 월별 시청률 평균 조회하기 -->
<select id="getMonthData" resultMap="monthData">
SELECT MONTH(BRDCST_DE) AS DE,
ROUND(AVG(WTCHNG_RT),3) AS RT
FROM BROADCAST
WHERE PROGRAM_NM = '뮤직뱅크'
GROUP BY DE
</select>
</mapper>