[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: [0, 24, 24]
         }
     });
 
 
 
 
 
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






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


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




저작자표시 비영리

'Yame Programmer > CSS & UI Plugin' 카테고리의 다른 글

[kendo ui] grid command destroy 안되는 현상 해결 방법  (0) 2021.03.30
[kendo ui] treeView 선택된 노드 정보 가져오기  (0) 2018.05.15
[kendo ui] Y축 값이 1 이하일땐 소수점 이상일땐 자연수, 천단위 콤마  (0) 2017.02.27
[css] css만으로 애니메이션 효과주는 방법  (0) 2016.10.07
[Kendo UI] 템플릿을 사용해 그리드 값 IF문 사용 하기( grid value use template for 'if')  (2) 2016.08.12

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}


이렇게 지정해 놓으면 된다

저작자표시 비영리

'Yame Programmer > CSS & UI Plugin' 카테고리의 다른 글

[kendo ui] treeView 선택된 노드 정보 가져오기  (0) 2018.05.15
[kendo ui] 켄도 ui bar, column 차트 모서리 radius 효과 넣기  (0) 2018.02.28
[css] css만으로 애니메이션 효과주는 방법  (0) 2016.10.07
[Kendo UI] 템플릿을 사용해 그리드 값 IF문 사용 하기( grid value use template for 'if')  (2) 2016.08.12
[CSS] 선택자 브라우저별 지원여부  (0) 2016.06.21

켄도 UI에서 제공하는 차트는 매우 유용합니다.


간단하고 예쁜 차트를 그릴수 있기 때문이죠


제 주변에선 유료 라이센스인 켄도UI를 사용하는 사람이 없기 때문에


혼자서 레퍼런스 뒤지고 삽질 하면서 배우고 있습니다 ㅎㅎ


켄도 UI에서 제공하는 차트의 배경색을 없애는 방법 입니다.


자바 스크립트에서의 코딩은 아래와 같이 작성 합니다.


 $("#kendoChart").kendoChart({

 chartArea: {

   height: 250,

   background: ""

 },

 });


위와 같이 background에 공백문자를 넣으면 배경이 사라집니다.


이것저것 막 해보다가 얻어걸렸는데 저게 정확한 사용법인지는 잘 모르겠습니다만


방법을 정말 모르겠으면 일단 되도록 만들어야겠죠? ㅎㅎ



저작자표시 비영리

'Yame Programmer > CSS & UI Plugin' 카테고리의 다른 글

[kendo ui] 켄도 ui 라인차트 bullet(원) 제거 하기  (0) 2016.06.21
[kendo ui] 켄도 ui 차트 색상 지정하기  (0) 2016.06.21
[kendo ui] 차트 valueAxes 라벨 위치 지정 하기  (0) 2016.06.20
[Kendo ui] 켄도 그리드 값이 null 일때 대체문자 사용 하기[template 사용]  (0) 2016.06.20
[CSS 퍼블리싱] ul li 간격 없애기  (2) 2015.06.19

+ Recent posts

티스토리툴바