카테고리 없음

선 차트 ( 비동기 통신 )

주먀 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>