- Gson lib 필요
- VO객체를 json 형식의 String 문자열로 바꿔줌
- Ctrl 부분
1
2
3
4
5
6
7
8
9
10
11
12
|
//chart json
ArrayList<UseCoupon> useCpArray = new ArrayList<UseCoupon>();
useCpArray = service4.getCouponList(page);
//넘어갈 jsonObject
Gson gson = new Gson();
String obj=gson.toJson(useCpArray);
// convert user object to json string and return it
d.addAttribute("jsonTest",obj);
String obj2 = gson.toJson(service4.getCouponChart());
d.addAttribute("chartData",obj2 );
| cs |
- script 부분
- 차트 데이터를 .reverse() 함수를 활용해서 역순으로 돌면서 완성
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
//받아온 json 데이터
var baseChartData =${chartData};
//chart data create
var couponChartData= new Array();
couponChartData.push([baseChartData.xname,baseChartData.yname]);
var StringDay="";
//.reverse() each 역순으로 ㅋ
$.each(baseChartData.data.reverse(),function(index,data){
//받아온 날짜 잘라서
StringDay=data.day.substring(5, 10).replace("-","월")+"일";
couponChartData.push(
[StringDay,
parseInt(data.cnt)]
);
})
| cs |
- Chart.js 부분 - chart 색상 폰트 등 세부 설정
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
|
// 쿠폰 chart 시작
function couponCharts() {
// actual bar chart data
var barData = google.visualization.arrayToDataTable(couponChartData);
// set bar chart options
var barOptions = {
focusTarget: 'category',
backgroundColor: 'transparent',
colors: ['#F59B9B', '#DA4949'],
fontName: 'Open Sans',
//전체 차트 영역 설정
chartArea: {
left: 30,//left padding
top: 10, //top padding
width: '100%',
height: '70%'
},
//bar width 설정
bar: {
groupWidth: '20%'
},
//X축 설정
hAxis: {
textStyle: {
fontSize: 15
}
},
// y축 설정
vAxis: {
minValue: 0,
//차트 데이터의 최대치가 차트 최상단의 80% 정도 차지할정도로 알아서 맞춰줌
//설정 안할시 데이터를 가지고 알아서 맞춰줌 짱짱맨
//maxValue: 1000,
baselineColor: 'black',
gridlines: {
color: 'black',
count: 4
},
textStyle: {
fontSize: 15
}
},
//bar 내용 설명 위치
legend: {
position: 'bottom',
textStyle: {
fontSize: 20
}
},
//animation effect
/* animation: {
duration: 1200,
easing: 'out',
startup: true
} */
};
// draw bar chart
var barChart = new google.visualization.ColumnChart(document.getElementById('coupon-chart'));
barChart.draw(barData, barOptions);
}
| cs |
- 마지막으로 chart 그려주는 부분
1
2
3
4
5
6
7
8
9
|
<!-- Google Chart -->
<script src="//www.google.com/jsapi"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(couponCharts);
</script>
| cs |
댓글 없음:
댓글 쓰기