켄도 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



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


+ Recent posts