켄도 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.907, 7.943, 7.848, 9.284, 9.263, 9.801, 3.890, 8.238, 9.552, 6.855],
                  
                },{
                    name: "World",
                    data: [1.988, 2.733, 3.994, 3.464, 4.001, 3.939, 1.333, -2.245, 4.339, 2.727]
                },{
                    name: "Russian Federation",
                    data: [4.743, 7.295, 7.175, 6.376, 8.153, 8.535, 5.247, -7.832, 4.3, 4.3]
                },{
                    name: "Haiti",
                    data: [-0.253, 0.362, -3.519, 1.799, 2.252, 3.343, 0.843, 2.877, -5.416, 5.590]
                }],
                valueAxis: {
                    labels: {
                        format: "{0}%"
                    },
                    line: {
                        visible: false
                    },
                    axisCrossingValue: -10
                },
                categoryAxis: {
                    categories: [2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011],
                    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.907, 7.943, 7.848, 9.284, 9.263, 9.801, 3.890, 8.238, 9.552, 6.855],
                      markers:{
                              size:1
                           }
                },{
                    name: "World",
                    data: [1.988, 2.733, 3.994, 3.464, 4.001, 3.939, 1.333, -2.245, 4.339, 2.727],
                  markers:{
                           size:1
                         }
                },{
                    name: "Russian Federation",
                    data: [4.743, 7.295, 7.175, 6.376, 8.153, 8.535, 5.247, -7.832, 4.3, 4.3]
                },{
                    name: "Haiti",
                    data: [-0.253, 0.362, -3.519, 1.799, 2.252, 3.343, 0.843, 2.877, -5.416, 5.590]
                }],
cs



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


저작자표시 비영리

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

[Kendo UI] 템플릿을 사용해 그리드 값 IF문 사용 하기( grid value use template for 'if')  (2) 2016.08.12
[CSS] 선택자 브라우저별 지원여부  (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

켄도 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.907, 7.943, 7.848, 9.284, 9.263, 9.801, 3.890, 8.238, 9.552, 6.855]
                },{
                    name: "World",
                    data: [1.988, 2.733, 3.994, 3.464, 4.001, 3.939, 1.333, -2.245, 4.339, 2.727]
                },{
                    name: "Russian Federation",
                    data: [4.743, 7.295, 7.175, 6.376, 8.153, 8.535, 5.247, -7.832, 4.3, 4.3]
                },{
                    name: "Haiti",
                    data: [-0.253, 0.362, -3.519, 1.799, 2.252, 3.343, 0.843, 2.877, -5.416, 5.590]
                }],
                seriesColors: [" #108D25","#48CFAD", "#FC6E51",  "#FC6E51", "#4FC0E8", 
                                 "#009bd7", "#26aadd", "#4db9e3", "#73c8e9", "#99d7ef"],
                valueAxis: {
                    labels: {
                        format: "{0}%"
                    },
                    line: {
                        visible: false
                    },
                    axisCrossingValue: -10
                },
                categoryAxis: {
                    categories: [2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011],
                    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



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

저작자표시 비영리

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

[CSS] 선택자 브라우저별 지원여부  (0) 2016.06.21
[kendo ui] 켄도 ui 라인차트 bullet(원) 제거 하기  (0) 2016.06.21
[kendo ui] 차트 valueAxes 라벨 위치 지정 하기  (0) 2016.06.20
[Kendo ui] 켄도 그리드 값이 null 일때 대체문자 사용 하기[template 사용]  (0) 2016.06.20
[켄도ui] 차트 배경 없애는 방법, 배경 투명으로 만들기  (0) 2015.07.13

+ Recent posts

티스토리툴바