[kendo ui] grid command destroy 안되는 현상 해결 방법

kendo ui의 grid 기능중 해당 라인을 삭제(제거) 하는 버튼을 추가 할수 있도록

 

command 의 destory가 있다.

 

그런데 해당 버튼을 클릭해도 dataSource의 destory가 아닌 create가 호출 되는 현상이 있는데

 

dataSource의 schema model에 지정하는 id값이 올바르지 못해서 그런것이다.

 

특히나 vo로 받아오는 경우엔 앞단어가 소문자로 치환되서 받아지는 것에 유의 하여야 한다

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
schema : {
            model : {
                id : "facility_ID",
                fields : {
                    fields : {
                        FACILITY_NM : {},
                        ASSET_CODE : {},
                        ENERGY_USE_ID : {},
                        CM_STANDARD : {},
                        INSTALLATION_DT : {},
                        EXPECTED_DAY : {},
                        PREVICOUS_DT : {},
                        EXPECTED_DT : {},
                    }
                }
            }
cs

 

저기서 id라고 쓰여져 있는 부분에 id필드명이 정확히 입력이 되어야

 

destory가 호출이 된다.

[kendo ui] treeView 선택된 노드 정보 가져오기




kendo ui에서 자주 쓰는 기능중 하나인 TreeView



맵형식의 데이터를 트리형식으로 시각화 해주는데 내가 회사에서 자주 사용하는 기능이다.


이떄 선택된 노드의 정보를 가져오는 방법에 대해서 알아보도록 하자




1. treeView에서 노드가 선택될때 이벤트를 주어서 현재 선택된 데이터를 가져오는 방법


1
2
3
4
5
6
7
8
9
10
11
$("#tree").kendoTreeView({
        dataSource : inlineDefault,
        dataTextField : "name",
        select : nodeSelect
    });
 
 
function nodeSelect(e) {
    var data = $("#tree").data('kendoTreeView').dataItem(e.node);
    console.log(data);
}
cs





위 코드와 같이 셀렉트 이벤트를 지정해 주면 된다.




2. 나중에 현재 선택되어져 있는 노드정보를 가져오는 방법



1
2
3
    var mytree = $("#tree").data("kendoTreeView");
    var selected = mytree.select();
    var selItem = mytree.dataItem(selected);
cs



아주 간단하다


끝이다!



[kendo ui] 켄도 ui bar, column 차트 모서리 radius 효과 넣기 






회사에서 가장 자주 사용하는 ui 플러그인은 kendo ui 이다.


주로 개발하는게 BEMS EMS같은 에너지 관리 시스템 개발인데


여기에 차트들이 굉장히 많이 들어간다.


kendo ui가 일단 기본디자인이 이쁘고 첫회사를 다닐때부터 사용했던 터라


익숙해서 개발에 소요되는 시간이 가장 짧기 때문에


새로운 회사에 들어가면 kendo ui를 사용하자고 어필을 많이 하기 떄문이다.





기본 디자인으로 사용을 하다가 이번에 새로운 프로젝트의 디자인 시안에


켄도 차트의 막대 부분에 radius 효과가 들어가는 부분이 있는데



예전에 구현해놨던 소스를 참고하려고 해도 그떄 구현했던건 윗부분이 볼록해 보이게 하는 효과였고


모서리에 radius 효과를 주는 부분은 없었다.




반나절쯤 구글링을 하다가 힌트가 될 소스를 발견하고 예전에 구현해놨던 코드와 접목시켜서


완성을 했다.


역시 구글신은 정답을 알고 계신다.




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
$("#mChart").kendoChart({
         legend: {
                position: "bottom",
                orientation: "horizontal"
              },
              seriesDefaults: {
                  overlay: { gradient: "none" },
                  visual: function (e) {
                        return createColumn(e.rect, e.options.color);
                    }
                },
         series: [{
             type: "column",
             data: data1,
             stack: true,
             name"on battery",
             color: "#d2d2d2",
             axis: "kWh"
         },{
             type: "line",
             data: data2,
             name"mpg",
             color: "#ec5e0a",
             axis: "mpg"
         }, {
             type: "line",
             data: data3,
             name"l/100 km",
             color: "#4e4141",
             axis: "l100km"
         }],
         valueAxes: [{
             name"kWh",
             title: { text: "kWh" },
             min: 0
             max: 161,
             majorUnit: 32,
             color: "#006ef0"
         }, {
             name"mpg",
             title: { text: "℃" },
             color: "#ec5e0a"
         }, {
             name"l100km",
             title: { text: "%" },
             color: "#4e4141"
         }],
         categoryAxis: {
             categories: category,
             // Align the first two value axes to the left
             // and the last two to the right.
             //
             // Right alignment is done by specifying a
             // crossing value greater than or equal to
             // the number of categories.
             axisCrossingValues: [02424]
         }
     });
 
 
 
 
 
function createColumn(rect, color) {
    var center = rect.center();
    var origin = rect.origin;
    
    var curveDistance = rect.size.width / 3;
    var x = rect.origin.x;
    var y = rect.origin.y;
    var bottomRight = rect.bottomRight();
    var bottomRightX = bottomRight.x;
    var bottomRightY = bottomRight.y;
    
    
    
    var gradient = new drawing.LinearGradient({
        stops: [{
            offset: 0,
            color: color
        }]
    });
 
    var path = new drawing.Path({
            fill: gradient,
            stroke: {
                color: "none"
            }
        }).moveTo(bottomRightX - curveDistance, y)
        .curveTo([bottomRightX, y], [bottomRightX, y], [bottomRightX, y + curveDistance])
        .lineTo([bottomRightX, bottomRightY - curveDistance])
        .curveTo(bottomRight, bottomRight, [bottomRightX - curveDistance, bottomRightY])
        .lineTo([x + curveDistance, bottomRightY])
        .curveTo([x, bottomRightY], [x, bottomRightY], [x, bottomRightY - curveDistance])
        .lineTo(x, y + curveDistance)
        .curveTo([x, y], [x, y], [x + curveDistance, y])
        .close();
    
    var topArcGeometry = new geometry.Arc([center.x, origin.y], {
      /*  startAngle: 0,
        endAngle: 360,
        radiusX: radiusX,
        radiusY: radiusY  */             
    });
 
    var topArc = new drawing.Arc(topArcGeometry, {
        fill: {
            color: color
        },
        stroke: {
            /*color: "#ebebeb"*/
        }
    });
    var group = new drawing.Group();
    
   // group.append(path, topArc);
    group.append(path);
    return group;
}
 
 
 
 
cs






비쥬얼의 크리에이트컬럼 펑션으로 들어가


막대부분 패스를 재설정 해준 후 렌더링 해준다.




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}


이렇게 지정해 놓으면 된다

웹 화면의 애니메이션 효과를 jquery의 animation 함수만을 이용해서 사용했었다면 CSS만으로 애니메이션 효과를 주는 방법을 알아보도록 하자


간단하게 


div안의 div위에 마우스르 올렸을때 움직이도록 해보자



1
2
3
<div class="container">
    <div class="move-box"></div>
</div>
cs


간단하게 이런 html요소를 만들어 놓고


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
.container
{
    width:300px;
    height:60px;
background-color:#FFF;
}
.move-box
{
    display:inline-block;
    width:50px;
    height:50px;
    background-color:#F0F;
}
.move-box:HOVER
{
    animation-duration: 3s;
    animation-name: slidein;
}
@keyframes slidein {
  from {
    margin-left: 100%;
  }
  to {
    margin-left: 0%;
  }
}
cs


이렇게 작성한다



결과는





그런데 이런식으로 하면 단방향으로 밖에 가지 않죠


저 소스에서 키프레임을


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
.container
{
    width:300px;
    height:60px;
background-color:#FFF;
}
.move-box
{
    display:inline-block;
    width:50px;
    height:50px;
    background-color:#F0F;
}
.move-box:HOVER
{
    animation-duration: 3s;
    animation-name: slidein;
}
@keyframes slidein {
     0%    {margin-left: 0%;}
    20%    {margin-left: 50%;}
    30%    {margin-left: 70%;}
    50%    {margin-left: 90%;}
    70%    {margin-left: 50%;}
    100%    {margin-left: 0%;}
}
cs



keyframes 안의 내용이 from, to 에서 퍼센테이지로 바뀌었죠


이런식으로 바꾸면


아래와 같이 움직이게 됩니다.







animation-name: slidein;


애니메이션 네임을 지정하고 @keyframes 에 어떤식으로 움직일지 선언을 하면 됩니다.



duration은 애니메이션이 어느 시간에 걸쳐 일어나게 되는지 지정합니다.


이외에도 여러가지가 있는데 


아래와 같습니다.



animation-delay
엘리먼트가 로드되고 나서 언제 애니메이션이 시작될지 지정합니다.
animation-direction
애니메이션이 종료되고 다시 처음부터 시작할지 역방향으로 진행할지 지정합니다.
animation-duration
한 싸이클의 애니메이션이 얼마에 걸쳐 일어날지 지정합니다.
animation-iteration-count
애니메이션이 몇 번 반복될지 지정합니다. infinite로 지정하여 무한히 반복할 수 있습니다.
animation-name
이 애니메이션의 중간 상태를 지정합니다. 중간 상태는  @keyframes 규칙을 이용하여 기술합니다.
animation-play-state
애니메이션을 멈추거나 다시 시작할 수 있습니다.
animation-timing-function
중간 상태들의 전환을 어떤 시간간격으로 진행할지 지정합니다.
animation-fill-mode
애니메이션이 시작되기 전이나 끝나고 난 후 어떤 값이 적용될지 지정합니다.




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의 값에 따라 다른 내용을 출력 할 수 있게 된다.



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


브라우저별 CSS 선택자(selector) 지원 여부.


예전 자료라 최신 버전은 없지만 어차피 최신 버전은 거의다 지원을 하니 지원이 안되는 브라우저를


찾아 보는 것에 중점을 두자.


진짜 익스플로러는 진짜 나쁜놈이다.





PatternMeaningS5C8F3.6O11I9bI8I7I6
#idid로 지정된 요소 선택OOOOOOOO
.classclass로 지정된 요소 선택OOOOOOOO
EE 요소를 선택OOOOOOOO
E:link방문하지 않은 E를 선택OOOOOOOO
E:visited방문한 E를 선택OOOOOOOO
E:hover마우스가 올라가 있는 동안 E를 선택OOOOOOOO
E:active마우스 클릭 또는 키보드(enter)가 눌린 동안 E를 선택OOOOOOOX
E:focusfocus가 머물러 있는 동안 E를 선택OOOOOOXX
E:first-lineE 요소의 첫 번째 라인 선택OOOOOOOX
E:first-letterE 요소의 첫 번째 문자 선택OOOOOOOX
*모든 요소 선택OOOOOOOO
E[foo]‘foo’ 속성이 포함된 E를 선택OOOOOOOX
E[foo="bar"]‘foo’ 속성의 값이 ’bar’와 일치하는 E를 선택OOOOOOOX
E[foo~="bar"]‘foo’ 속성의 값에 ’bar’가 포함되는 E를 선택OOOOOOOX
E[foo|="en"]‘foo’ 속성의 값이 ’en’ 또는 ’en-’ 으로 시작되는  E를 선택OOOOOOOX
E:first-child첫 번째 자식 요소가 E라면 선택OOOOOOOX
E:lang(fr)HTML lang 속성의 값이 ’fr’로 지정된 E를 선택OOOOOOXX
E::beforeE 요소 전에 생성된 요소 선택OOOOOOXX
E::afterE 요소 후에 생성된 요소 선택OOOOOOXX
E>FE 요소의 자식인 F 요소 선택OOOOOOOX
E+FE 요소를 뒤의 F 요소 선택OOOOOOOX
E[foo^="bar"]‘foo’ 속성의 값이 ’bar’로 정확하게 시작하는 요소 선택OOOOOOOX
E[foo$="bar"]‘foo’ 속성의 값이 ’bar’로 정확하게 끝나는 요소 선택OOOOOOOX
E[foo*="bar"]‘foo’ 속성의 값에 ’bar’를 포함하는 요소 선택OOOOOOOX
E:root문서의 최상위 루트 요소 선택OOOOOXXX
E:nth-child(n)그 부모의 n번째 자식이 앞으로부터 지정된 순서와 일치하는 E 라면 선택OOOOOXXX
E:nth-last-child(n)n번째 자식이 뒤로부터 지정된 순서와 일치하는 요소가 E 라면 선택OOOOOXXX
E:nth-of-type(n)E 요소 중 앞으로부터 순서가 일치하는 n번째 E 요소 선택OOOOOXXX
E:nth-last-of-type(n)E 요소 중 끝으로부터 순서가 일치하는 n번째 E 요소 선택OOOOOXXX
E:last-childE 요소 중 마지막 자식이라면 E 선택OOOOOXXX
E:first-of-typeE 요소 중 첫번째 E 선택OOOOOXXX
E:last-of-typeE 요소 중 마지막 E 선택OOOOOXXX
E:only-childE 요소가 유일한 자식이면 선택OOOOOXXX
E:only-of-typeE 요소가 같은 타입이면 선택OOOOOXXX
E:empty텍스트 및 공백을 포함하여 빈 자식을 가진 E를 선택OOOOOXXX
E:targetE의 URI의 대상이 되면 선택OOOOOXXX
E:enabled활성화된 폼 컨트롤 E요소 선택OOOOOXXX
E:disabled비활성화된 폼 컨트롤 E요소 선택OOOOOXXX
E:checked선택된 폼 컨트롤(라디오버튼,체크박스)을 선택OOOOOXXX
E:not(s)s가 아닌 E 요소 선택OOOOOXXX
E~FE 요소가 앞에 존재하면 F를 선택OOOOOOOX


켄도 ui 라인차트의 bullet(라인 사이의 동그라미)을 없애는 방법 입니다.


라인을 그려줄때 동그란 마커 없이 깔끔하게 그려주고 싶을때 사용 합니다.


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
 $("#chart").kendoChart({
                title: {
                    text: "Gross domestic product growth \n /GDP annual %/"
                },
                legend: {
                    position: "bottom"
                },
                chartArea: {
                    background: ""
                },
                seriesDefaults: {
                    type: "line",
                    style: "smooth",
                   markers:{
                                  size:1
                                  }
                },
                series: [{
                    name"India",
                    data: [3.9077.9437.8489.2849.2639.8013.8908.2389.5526.855],
                  
                },{
                    name"World",
                    data: [1.9882.7333.9943.4644.0013.9391.333-2.2454.3392.727]
                },{
                    name"Russian Federation",
                    data: [4.7437.2957.1756.3768.1538.5355.247-7.8324.34.3]
                },{
                    name"Haiti",
                    data: [-0.2530.362-3.5191.7992.2523.3430.8432.877-5.4165.590]
                }],
                valueAxis: {
                    labels: {
                        format: "{0}%"
                    },
                    line: {
                        visible: false
                    },
                    axisCrossingValue: -10
                },
                categoryAxis: {
                    categories: [2002200320042005200620072008200920102011],
                    majorGridLines: {
                        visible: false
                    },
                    labels: {
                        rotation: "auto"
                    }
                },
                tooltip: {
                    visible: true,
                    format: "{0}%",
                    template: "#= series.name #: #= value #"
                }
            });
cs



이전과 같은 켄도 ui 라인차트 데모페이지의 첫번째 소스 입니다.


저기에서 


seriesDefaults 속성에


 markers:{
           size:1
       }


markers 라는 속성을 추가 하였고 사이즈는 1로 지정 하였습니다.


0으로 지정하면 마우스오버 되었을때 엄청 커다란 동그라미가 생기네요


시리즈 디폴트에 마커스 사이즈를 1로 지정해 놓으면 모든 라인에 bullet가 사라지게 됩니다.


혹은 특정 라인에만 bullet를 없애고 싶을땐




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
series: [{
                    name"India",
                    data: [3.9077.9437.8489.2849.2639.8013.8908.2389.5526.855],
                      markers:{
                              size:1
                           }
                },{
                    name"World",
                    data: [1.9882.7333.9943.4644.0013.9391.333-2.2454.3392.727],
                  markers:{
                           size:1
                         }
                },{
                    name"Russian Federation",
                    data: [4.7437.2957.1756.3768.1538.5355.247-7.8324.34.3]
                },{
                    name"Haiti",
                    data: [-0.2530.362-3.5191.7992.2523.3430.8432.877-5.4165.590]
                }],
cs



시리즈에 들어가는 속성에 마커스를 따로 지정해 주면 됩니다.


켄도 ui의 차트를 그릴때 색상을 지정하는 방법 입니다.


차트를 구현하다 보면 임의로 지정된 색상을 사용해야 하는 경우가 있습니다. 그럴 경우 간단하게 


사용 할 수 있는 방법입니다.


코드는 아래와 같습니다.



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
 $("#chart").kendoChart({
                title: {
                    text: "Gross domestic product growth \n /GDP annual %/"
                },
                legend: {
                    position: "bottom"
                },
                chartArea: {
                    background: ""
                },
                seriesDefaults: {
                    type: "line",
                    style: "smooth"
                },
                series: [{
                    name"India",
                    data: [3.9077.9437.8489.2849.2639.8013.8908.2389.5526.855]
                },{
                    name"World",
                    data: [1.9882.7333.9943.4644.0013.9391.333-2.2454.3392.727]
                },{
                    name"Russian Federation",
                    data: [4.7437.2957.1756.3768.1538.5355.247-7.8324.34.3]
                },{
                    name"Haiti",
                    data: [-0.2530.362-3.5191.7992.2523.3430.8432.877-5.4165.590]
                }],
                seriesColors: [" #108D25","#48CFAD""#FC6E51",  "#FC6E51""#4FC0E8"
                                 "#009bd7""#26aadd""#4db9e3""#73c8e9""#99d7ef"],
                valueAxis: {
                    labels: {
                        format: "{0}%"
                    },
                    line: {
                        visible: false
                    },
                    axisCrossingValue: -10
                },
                categoryAxis: {
                    categories: [2002200320042005200620072008200920102011],
                    majorGridLines: {
                        visible: false
                    },
                    labels: {
                        rotation: "auto"
                    }
                },
                tooltip: {
                    visible: true,
                    format: "{0}%",
                    template: "#= series.name #: #= value #"
                }
            });
cs



켄도 ui의 라인차트를 그리는 데모페이지의 첫번째 소스에 


seriesColors: [" #108D25","#48CFAD""#FC6E51",  "#FC6E51""#4FC0E8"
                                 "#009bd7""#26aadd""#4db9e3""#73c8e9""#99d7ef"],


이 코드를 추가 하였습니다. seriesColors 라는 속성이 색상을 지정해 주는 속성인데


저 배열 안에 색상코드를 넣으면 차트가 저 순서대로 색상을 넣어주게 됩니다.



두번째 방법은


시리즈에 들어갈 데이터에 직접 색상을 지정해 주는 방법 입니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
data: [{
            category: "변속A",
            value: data1Val,
            color: "#9de219"
        },{
            category: "변속C",
            value: data2Val,
            color: "#90cc38"
        },{
            category: "등속B1",
            value: data3Val,
            color: "#006634"
        },{
            category: "등속B2",
            value: data4Val,
            color: "#004d38"
        }]
cs



차트가 그려줄 데이터를 직접 만들어 넣어 줄떄 컬러속성을 함께 넣어 주면 지정된 색상으로 차트를 그려주게 됩니다.

켄도 Chart X축[valueAxis] 이름 원하는 곳에 위치하도록 하는 방법



켄도 ui의 차트를 사용할때 X축의 valueAxes 라벨 위치를 변경 하고 싶은 때가 있다.


물론 포지션이라는 명령어로 간단한 위치 지정은 할 수 있지만 UI를 구성하다보면 라벨의 위치를


정확히 원하는 장소에 위치 하게 하고 싶을때가 있다.


방법을 알아보자




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
 
$("#chart").kendoChart({
    title: {
        text: "Gross domestic product growth \n /GDP annual %/"
    },
    legend: {
        position: "bottom"
    },
    chartArea: {
        background: ""
    },
    seriesDefaults: {
        type: "line",
        style: "smooth"
    },
    series: [{
        name"India",
        data: [3.9077.9437.8489.2849.2639.8013.8908.2389.5526.855]
    },{
        name"World",
        data: [1.9882.7333.9943.4644.0013.9391.333-2.2454.3392.727]
    },{
        name"Russian Federation",
        data: [4.7437.2957.1756.3768.1538.5355.247-7.8324.34.3]
    },{
        name"Haiti",
        data: [-0.2530.362-3.5191.7992.2523.3430.8432.877-5.4165.590]
    }],
    valueAxis: {
        labels: {
            format: "{0}%"
        },
        title: {
            text: unit,
            margin: {
                bottom: 20,
                top:-35,
                right:-20
              },
              position:'top',
              rotation: 0
          },
        line: {
            visible: false
        },
        axisCrossingValue: -10
    },
    categoryAxis: {
        categories: [2002200320042005200620072008200920102011],
        majorGridLines: {
            visible: false
        },
        labels: {
            rotation: "auto"
        }
    },
    tooltip: {
        visible: true,
        format: "{0}%",
        template: "#= series.name #: #= value #"
    }
});
cs



위와 같이 코딩했을때 X축 라벨의 위치를 지정해 주는 곳은 ValueAxis 를 설정하는 곳에 있는


title: {
            text: unit,
            margin: {
                bottom: 20,
                top:-35,
                right:-20
              },
              position:'top',
              rotation: 0
          },



이 부분이다. 포지션으로 탑을 주고 그 상태에서


마진을 이용해 위아래 양옆의 위치를 지정해 줄 수 있다.


위와 같이 하면


켄도 차트의 X축 이름을 원하는 위치에 마음대로 지정 할 수 있게 된다.

+ Recent posts