Y축 라벨  데이터가 1 이하일땐 소수점표기 

이상일땐 자연수, 천단위 콤마찍도록 하는 방법




켄도 UI의 차트를 하다 보면 여러가지 부가기능 및 옵션설정을 해주어야 하는 부분이 많다.


뭐 가장 많이 쓰이는 것이 차트와 그리드인데


차트를 구현하다 보니 값이 0.5 같은 1 이하값이 들어오는 경우에


Y축 라벨링이


0 0 0 1 1 1 이런식으로 나타나는 경우가 있다.


그렇다고 템플릿에 


1
2
3
4
5
  valueAxis: {
            labels: {
                format: "{0:#.##}"
            }
        },
cs



이런식으로 작성하는 경우엔 값이 100이든 1000이든


Y축 라벨링은 100.00 200.00  이런식으로 소수점이 고정으로 들어가게 되버린다.


그래서 여기저기 찾아보고 삽질을 하다가


템플릿에 IF문을 사용할 수 있으니 값이 2 이하일때만 소수점으로 나오게 하고 


그 이상인 경우엔 자연수로 나오도록 하는 방법을


사용하면 되겠다 싶어 테스트 해보니 성공적으로 나오게 된다.



1
2
3
4
5
valueAxis: {
            labels: {
                template:kendo.template("#if (value == null || value < 2) {# #= kendo.format('{0:N1}', value) # #} else {# #= kendo.format('{0:N0}', value) # #}#"),
            }
        },
cs




템플릿 양식이 좀 길어지긴 하지만 성공적으로 나온다.



이렇게 값이 없거나 작으면 소수점으로







값이 커지면 자연수에 천단위 콤마까지


Y축 라벨에 천단위 콤마찍는건


포맷을 {0:N0}


이렇게 지정해 놓으면 된다

Kendo UI의 그리드를 사용할떄


특정 값이 들어오면 그리드의 내용을 다른것으로 바꾸는 방법에 대해 알아보자.



예를들어 값이 0으로 들어오면 '미사용'  1로 들어오면 '사용' 이런식으로 말이다.


일반적으로 DB에서 값이 0으로 들어오면 0으로 1로 들어오면 1로 표기가 되는데


켄도의 템플릿(template) 기능을 사용하면 좀더 다양하게 활용이 가능 하다



일반적인 켄도 그리드의 컬럼 설정 스크립트이다.


1
2
3
4
5
columns: [
             {field: "code_ID", width:"80", title: "코드 ID"},
            {field: "code_NAME", width:"130", title: "코드 명칭"},
            {field: "code_TYPE", width:"80", title: "사용여부"}
        ]
cs


위와 같이 필드 아이디와 타이틀 정도만 설정을 해주면


해당 오브젝트의 값이 그대로 들어가게 된다.



템플릿을 이용해 사용여부 code_TYPE에 값이 0으로 들어오면 미사용 1로 들어오면 사용 이라고 표현하기 위한 코드는



1
2
3
4
5
6
columns: [
             {field: "code_ID", width:"80", title: "코드 ID"},
            {field: "code_NAME", width:"130", title: "코드 명칭"},
            {field: "code_TYPE", width:"80", title: "사용여부",
             template:kendo.template("#if (code_TYPE == 0) {# #='미사용'# #} else if(code_TYPE== 1 ){# #='사'# #} else {# #='NFC'# #} #")}
        ]
cs



컬럼을 만들어주는 객체에 template라는 것을 추가해고


위와 같이 코딩하게 되면 IF문을 사용하여 code_type의 값에 따라 다른 내용을 출력 할 수 있게 된다.



템플릿을 사용하면 그리드를 다양하게 활용 할 수가 있다.


켄도 그리드를 생성시에 들어가는 값이 null 일때 '--' 라든가 '값없음' 이라던가 하는 내용을 넣어야 할 때가 있다.


물론 DB에서 쿼리로 뽑아올때 조건을 주어 null 일 경우 대체문자를 사용 할 수 있지만 


뽑아온 데이터 리스트끼리 사칙연산을 해야 하는 경우 중간에 들어가있는 string 문자열이 문제가 될 수도 있다.


혹은 쿼리에 손을 대지 못하는 경우도 있을 수 있다.



방법은 간단하다. 이런 기능이 있는줄 모르기 때문에 못쓰는 거지 있는줄 안다면 쉽게 사용이 가능하다.



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
 

var nullTypeString = '--';

 $("#grid").kendoGrid({
       dataSource: {
           type: "odata",
           transport: {
               read: "데이터 가져올곳"
           },
           pageSize: 20
       },
       height: 550,
       groupable: true,
       sortable: true,
       pageable: {
           refresh: true,
           pageSizes: true,
           buttonCount: 5
       },
       columns: [{
           field: "record_DATE",
           title: msgData.data('elecdata'), //날짜
           locked: true,
           lockable: false,
           width: 120,
           attributes: {
               style: "text-align: left;"
             }
       },{
           field: "tag_NAME",
           title: msgData.data('tagname'), //태그명
           locked: true,
           lockable: false,
           width: 120,
           attributes: {
               style: "text-align: left;"
             }
       }, {
           field: "sum_VAL",
           title: "Sum",
           locked: true,
           format:"{0:n2}",
           template:kendo.template("#if (sum_VAL != null) {# #=sum_VAL# #} else {# #="+nullTypeString+"# #}#"),
           width: 120,
           attributes: {
               style: "text-align: right;"
             }
       }, {
           field: "avg_VAL",
           title: "Avg",
           format:"{0:n2}",
           template:kendo.template("#if (avg_VAL != null) {# #=avg_VAL# #} else {# #="+nullTypeString+"# #}#"),
           locked: true,
           width: 120,
           attributes: {
               style: "text-align: right;"
             }
       },{
           field: "min_VAL",
           title:"Min",
           format:"{0:n2}",
           locked: true,
           width: 120,
           template:kendo.template("#if (min_VAL != null) {# #=min_VAL# #} else {# #="+nullTypeString+"# #}#"),
           attributes: {
               style: "text-align: right;"
             }
       },  {
           field: "max_VAL",
           title: "Max",
           format:"{0:n2}",
           template:kendo.template("#if (max_VAL != null) {# #=max_VAL# #} else {# #="+nullTypeString+"# #}#"),
           locked: true,
           width: 120,
           attributes: {
               style: "text-align: right;"
             }
       }]
   });
cs




위와 같이 코딩하면 된다. 중요한건


columns 의


template:kendo.template("#if (max_VAL != null) {# #=max_VAL# #} else {# #="+nullTypeString+"# #}#")


이 부분이다.



해당 컬럼의 들어오는 필드의 값이 null이 아닐경우 값을 나타내고 그것이 아니라면 nulltypeString 변수값을 넣는다는 설정이다.

+ Recent posts