Chart.js (2) ajax를 통한 데이터 차트값 출력

Chart.js(1)은 여기서 보시면 됩니다.

2022.03.15 - [Coding story/go Spring,JSP] - Chart.js (1) 기본

 

ajax와 연동하기위해선 컨트롤단에서 데이터를 json형태로 보내 이를 jsp에서 받아 출력시켜야한다.

 

일단 매출이라는 VO에서 판매금액과 날짜만 가져오고 이를 json형태로 넣어 보내보도록 한다.

mybatis를 통해 VO를 List에 넣어 mapper와 service를 통하여 Controller에서 시작하는 것부터 하겠다.

참, 시작전에 java의 object객체를 json으로 바꾸기 위하여 필요한 gson라이브러리를 넣자.

 

 

#Pom.xml 을 통한 DI

        <!-- https://mvnrepository.com/artifact/com.google.code.gson/gson -->
        <!-- Java Object를 Json 문자열로 변환할 수 있고, Json 문자열을 Java Object로 변환 -->
        <dependency>
            <groupId>com.google.code.gson</groupId>
            <artifactId>gson</artifactId>
            <version>2.9.0</version>
        </dependency>

 

#Controller.java

    /**
     * 통계 - 일별 매출 현황
     * 일일 매출 현황을 차트로 출력
     */
    @RequestMapping(value="/daily",method = RequestMethod.GET)
    public String dailyProfit(Model model) {
        
        return "sttst/dailyProfit";
    }
    
    
    /**
     * 통계 - 일별 매출 현황 차트 출력
     * Post타입
     * ajax와 연결되어 chart.js출력 
     * @param json데이터
     */
    @ResponseBody
    @RequestMapping(value="/daily", method = RequestMethod.POST)
    public String dailyPost(Model model) {
        
    List<SlsVO>list = sttstService.getDailyIncome();
    //gson객체 생성
        Gson gson = new Gson();
        JsonArray jArray = new JsonArray();
    //date타입을 string타입으로 바꾸기
        DateFormat df = new SimpleDateFormat("yyyy-MM-dd");
        
        Iterator<SlsVO> it = list.iterator();
        while(it.hasNext()) {
            SlsVO slsVO = it.next();
            JsonObject object = new JsonObject();
            int sale = slsVO.getSlsAmt();
            
            Date dt = slsVO.getSlsDt();
            String date =  df.format(dt);
            
            object.addProperty("sale", sale);
            object.addProperty("date", date);
            jArray.add(object);
        }
        
        String json = gson.toJson(jArray);
        logger.info("json변환: "+json);
        
        return json;
    }
    

 

logger에서 뜨는 값 :   json변환: [{"sale":200000,"date":"2022-01-01"} 

 

이후 post의 /daily를 타고 json이라는 변수의 json데이터를 보낸다.

 

@ResponseBody는 리턴값을 데이터로 할수 있게끔 하는 어노테이션으로서 

model.addAttribute랑 달리 원하는 데이터의 형태로 직접 보낼때 좋다.

그리고 이런 이유로 ajax와 쓰기 정말좋다. 요새 데이터는 거의 json형태이니

 

 

#sttst/daily

/daily에서 get단을 타고 화면출력

/daily에서 post단을 타고 json보냄 

 

이 2가지가 하나의 jsp에서 이루어 진다.

 

 

#sttst/daily의 jsp페이지내에서 ajax

chart.js 기본 출력 방식은 저번방식처럼 쓰되

받아오는 데이터는 array값의 데이터가 json방식으로 들어오므로 반복문을 통하여

미리 만들어둔 배열 값의 변수에 push로 넣는다. (데이터확인은 alert보단 console.log가 더 정확하다)

이는 원하는 데이터를 빼서 각각의 array값에 넣어두어야하므로 배열도 2가지로 뽑는다 (하나는 x축 하나는 y축)

 

$(function(){
        $.ajax({
            url: "/sttst/daily",
            async: true,
            //data: JSON.stringify(data),
            type: "POST",
            dataType:"json",
            contentType: "application/json; charset=utf-8",
            success:function(data){
                
                var salelist=[];
                var datelist=[];
                
                $.each(data,function(){
                    salelist.push(this["sale"])
                    datelist.push(this["date"])
                })
                
                const ctx = document.getElementById('myChart').getContext('2d');
                // 그래픽 엔진으로 유명한 것 (DirectX, OpenGL)
                const myChart = new Chart(ctx, {
                    type: 'line', //bar,line,pie,doughnut,radar
                    //labels : x축의 값
                    //datasets : data의 값, 속성들 지정
                    data: {
                        labels: datelist,
                        datasets: [{
                            label: '일일 매출 현황',
                            data: salelist,
                            backgroundColor: [
                                'lightblue'
                            ],
                            borderColor: [
                                'lightblue'
                            ],
                            borderWidth: 3
                        }]
                    },
                    options: {
                        scales: {
                            y: {
                                beginAtZero: true
                            }
                        }
                    }
                });