[Spring] 쇼핑몰 - 49 Chart.js에 Map 데이터 조회하기

카테고리별 매출 현황 차트와 표를 띄워보자.

 

---

데이터베이스에 카테고리별 매출 현황 목록을 추가한다.

AdminController 컨트롤러

메뉴코드와 서브메뉴코드 둘다 받을 수 있는 AdminSubMenuVO를 커맨드객체로 불러와주었다.

이게 있어야 정상적으로 작동한다. 그리고 Model 객체에 MENU_003 데이터를 무작위로 넣으면서 menuCode에 저장한다.

IntercepterConfig 인터셉터

인터셉터에 만들었던 컨트롤러를 추가해주어 메뉴와 서브메뉴를 띄울 수 있다.

sale_category_month.html

이렇게 서브메뉴와 메뉴가 성공적으로 뜨면 된다.

sale_category_month.html

chart.js에서 script를 가지고와줘서 html에 넣어준다. 그리고 노란색 박스처럼 js도 하나 만들어주자.

sale_category_month.js

chart.js에서 적절히 코드들을 가지고 와서 js에 추가해주었다. data에 있는 labels의 값들을 카테고리 명들로 채워넣었다.

options에는 여러 항목들을 추가할 수 있는데, 필요할 때마다 추가하도록하자.

 

html로 들어왔을 때 차트가 이렇게 뜨면 된다.

---

 

연결하려면 ITEM_CODE를 알아야하는데, BUYVO에는 ITEM_CODE가 없다. BUY_DETAIL에서 끌어와야한다.

BUY_DETAIL은 구매할때 어떤 상품을 샀는지까지 나온다. 우리는 어떤 카테고리에서 샀는지 카테고리에 대한 정보가 필요하다. BUY_DETAIL에 있는 ITEM_CODE에 대한 값을 가지고 카테고리에 대한 정보를 유추해가야한다.

 

ITEM_CODE를 GROUP하면 ITEM_CODE끼리 묶여지니까, 여기서 그 갯수를 조회해보자. 그러면 상품별로 몇개가 팔렸는지 바로 나온다.

 

SHOP_ITEM 테이블에서 ITEM_CODE를 사용하면 CATE_CODE를 알 수 있다.

 

 

따라서 이런식으로 코드를 짜면 ITEM_CODE를 알 수 있고, 그 상품에 대한 CATE_CODE도 알 수 있다.

WITH 테이블 명 AS 는 임의의 테이블 하나 만들어서  마치 실제 테이블처럼 조회하는것이다.

이렇게 쓴 이유는 SELECT 절 안에 서브쿼리가 존재하는데 별칭으로 CATE_CODE를 주었다.

하지만 GROUP BY를 쓸때, 일반적으로 쓰게 되면 조회할 수 없다. 이유는 실행되는 순서가

FROM -> WHERE -> GROUP BY -> HAVING -> SELECT -> ORDER BY 이기 때문에,

SELECT 절에 있던 것은 GROUP BY 보다 이후에 실행되기 때문에 GROUP BY에서 서브쿼리를 읽을 수 없다.

admin-mapper.xml

resultType 에는 HashMap 대신 Map을 넣어도 사용가능하다. 단 TreeMap은 안된다.

 

AdminService

조회할 데이터들이 CATE_CODE, CATE_NAME, SUM_BUY_CNT는 int형 String 모두 들어가있으므로

value 값으론 그냥 Object줬다.

html오자마자 Ajax 실행하러간다.

sale_category_month.js

그래프를 drawChart() 함수 안에 위치시켜줘서 html이 열리자마자 바로 나오지 않도록 구성해주었고,

바로 Ajax를 타게된다. 

AdminController 컨트롤러

이렇게 컨트롤러에서 바로 Ajax로 가면서 mapList 데이터를 가지고 간다. 

실행은 컨트롤러에서 바로 다시 Ajax가 실행되면서 mapList 값을 받아 js로 간다.

sale_category_month.js

컨트롤러에서 넘어오면서 result 값을 받아와 drawTable() 함수와 drawChart()가 실행되는데 정의된 함수를 살펴보자.

tableDiv 태그 뒤에 삽입될 코드를 자바스크립트로 짜준다.

insertAdjacentHTML을 이용해 태그 뒤에 str을 추가해주는 코드를 짰다.

tableDiv 태그 뒤에 위에서 짜준 js 코드 str 데이터들이 삽입될 것이다.

 

차트 위에 No, 카테고리명, 누적 판매 개수 html이 추가된 것을 확인할 수 있다.

js의 Ajax에서 console을 찍어보면 데이터가 들어간 것을 확인해볼 수 있다.

Map이 2개 들어있는 것을 List로 가져간 것이다.

 

따라서 drawTable() 에 result 데이터를 넣어주고, 함수에서 data로 받아오자.

똑같이 drawChart() 에도 data로 데이터를 받아와서 for문과 foreach문으로 각각 데이터를 추출해서 채워넣었다.

js에서 모든 데이터를 html에 그려주었다. 이렇게 해서 최종적으로 결과화면이 나오게 된다.