99DAY / Spring, Mybatis / ChartsJS 로 차트만들기

2017. 8. 24. 08:53
1
2
3
4
5
6
7
<resultMap type="java.util.HashMap" id="statistics">
 
        <result javaType="java.lang.String" property="statsDate" column="date" ></result>
 
        <result javaType="java.lang.String" property="statsAmount" column="amount" ></result>        
 
</resultMap>
cs


HashMap리스트로 받으려다가 힘들어서 그냥 DTO를 생성하였따.


getGSON으로 받아올때 차트생성해줘야지만 차트가 그려지는것 같다.



차트JS Sample

http://www.chartjs.org/samples/latest/


JSP

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<head>
<link rel="shortcut icon" href="resources/files/images/umbrella.ico">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.js"></script>
</head>
<c:set value="${cooContractNo}" var="no" />
<script>
    
 
    
 
 
    $(document).ready(function() {
 
        
        var chartLabels = []; // 받아올 데이터를 저장할 배열 선언
        var chartData = []; 
        var month="";
    
        var cooContractNo = '<c:out value="${no}"/>';
        
        function createChart() {
            
            var ctx = document.getElementById("canvas").getContext("2d");
            LineChartDemo = Chart.Line(ctx, {
                data : lineChartData,
                options : {
                    scales : {
                        yAxes : [ {
                            ticks : {
                                beginAtZero : true
                            }
                        } ]
                    }
                }
            });
        }
 
 
        
        //selectList로 월을 선택해서 ajax로 받는다.
        $('#selectMonth').change(function() {
            var changeMonth = $('#selectMonth option:selected').val();
            month = changeMonth;
            console.log('month:'+month);
            
            
             
        });
        
        //버튼을 클릭하면 차트가 그려진다. createChart()함수를 안에다 선언해야지 차트값을 받더라...
        $('#btn').click(function(){
            
            chartLabels = [];
            chartData=[];
            
            //getJson으로 데이터 
            $.getJSON("./getDailyVisitor", {
                cooContractNo : cooContractNo,
                month : month
            }, function(data) {
                $.each(data, function(key, value) {
                    
                    chartLabels.push(value.statsDate);
                    chartData.push(value.statsAmount);
                });
                
                lineChartData = {
                        labels : chartLabels,
                        datasets : [ {
                            label : "일별 방문자 수",
                            backgroundColor:"#bfdaf9",
                            borderColor: "#80b6f4",
                            pointBorderColor: "#80b6f4",
                            pointBackgroundColor: "#80b6f4",
                            pointHoverBackgroundColor: "#80b6f4",
                            pointHoverBorderColor: "#80b6f4",
                            fill: false,
                            borderWidth: 4,
                            data : chartData
                        } ]
 
                    }
                createChart();
                
            });
        })
 
        
    })
    
</script>
    <div class="row">
 
            <div class="container">
 
 
 
                <div style="margin-top:20px; margin-left:80px">
                    <select name="selectMonth" id="selectMonth">
 
                        <option value="1">JAN</option>
                        <option value="2">FEB</option>
                        <option value="3">MAR</option>
                        <option value="4">APR</option>
                        <option value="5">MAY</option>
                        <option value="6">JUN</option>
                        <option value="7">JUL</option>
                        <option value="8">AUG</option>
                        <option value="9">SEP</option>
                        <option value="10">OCT</option>
                        <option value="11">NOV</option>
                        <option value="12">DEC</option>
                    </select>
                    <button id="btn">보기</button>
                </div>
            </div>
 
 
 
            <div id="graph" style="width: 80%; margin: 30px;">
                <div>
                    <canvas id="canvas" height="350" width="600"></canvas>
                </div>
            </div>
        </div>
 
    </div>
 
 
 
 
 
cs

RESTController

Mybatis에서 Java타입으로 불러온 객체를 Gson라이브러리 통해
Json타입의 리스트로 변환 해 준다

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
package com.ksmart.harulook.partner.controller;
 
import java.util.HashMap;
import java.util.List;
 
import javax.servlet.http.HttpSession;
 
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;
 
import com.google.gson.Gson;
import com.ksmart.harulook.partner.service.PartnerInterface;
import com.ksmart.harulook.partner.service.PartnerStatsDto;
 
@RestController
public class PartnerRestController {
 
    @Autowired
    private PartnerInterface partnerDao;
 
    @RequestMapping(value = "/getDailyVisitor", method = RequestMethod.GET)
    public String getDailyVisitor(HttpSession session, String month){
        String cooContractNo = (String) session.getAttribute("setNo");
        Gson gson = new Gson();
        HashMap<String,String> map = new HashMap<String,String>();
        
        map.put("cooContractNo",cooContractNo);
        map.put("month", month);
 
        List<PartnerStatsDto> list= partnerDao.selectDailyVisitor(map);
        
        return gson.toJson(list);
 
    }
 
}
 
cs





저작자표시

+ Recent posts

티스토리툴바