자동차 경주 만들기 웹버전


심심해서 만들어본


자동차 경주 웹버전


자바스크립트 제이쿼리를 이용해서 만들었다


https://jsbin.com/diqiwiroho/1/edit?output


1. 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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  
  <h1>자동차 경주</h1>
  <h4>경주할 자동차 대수를 입력 후 경주 시작을 누르시면 됩니다.</h4>
  <h4>이름적용 체크 박스 체크 후엔 자동차의 이름을 지정 할 수 있습니다.</h4>
  <h4>자동차 최대 입력 대수는 30대 입니다.</h4>
  <h4>트랙 최대 길이는 100 입니다.</h4>
  <h4>속도제한은 없습니다. 1000당 1초 입니다.</h4>
  <h4>만든 사람은 잘생긴 야매 개발자 In★ 입니다. 경주 할때마다 감사함을 느끼세요.</h4>
   <label for="nameCheck">이름적용</label><input id="nameCheck" type='checkbox' onchange="countCar();" />
  <br>
  <label for="nameCheck">트랙길이</label><input id="trackLength" type='number' onchange="countCar();" value="10"/>
  <br>
  <label for="nameCheck">속도(ms)</label><input id="raceSpeed" type='number' value="400"/>
  
  
  
  <br>
  <br>
  <label>경주할 자동차 대수</label>
  <input type="number" id="inputCarCnt" onchange="countCar();"/>
  
  <button onclick="startRace();">경주시작</button>
  <button onclick="countCar();">리셋</button>
  
  <div id="carNameContainer">
    
  
  </div>
  
  <div id="trackContainer" class="track-container">
  </div>
  
  <div id="finshBox">
  </div>
  
</body>
</html>
cs




2. css


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
.track-container{
  width:100%;
  display:inline-block;
  
}
.track{
  width:100%;
  float: left;
}
.car-label{
  float:left;
  display:inline-block;
  
}
.cell{
  border:1px solid;
  height:15px;
  width:15px;
  float:left;
}
.move{
  border:1px solid;
  height:15px;
  width:15px;
  float:left;
  background:black;
}
h4{
 margin:0px;
  margin-bottom:5px;
 font-size:15px;
  
}
cs



3. js

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
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
var carArr = [];
var finshNum = 0;
//var carNameArr = [];
 
function countCar(){
  carNameArr = [];
  carArr = [];
  finshNum = 0;
  var carCnt = $("#inputCarCnt").val();
  
  if(carCnt > 30){
    alert("최대 자동차 입력 개수는 30대 입니다.");
    return false;
  }
  
  
  var trackLen =  $("#trackLength").val();
  
  
  if(trackLen > 100){
    alert("최대 트랙 길이는 100 입니다.");
    return false;
  }else if(trackLen == 0 || trackLen ==""){
    alert("트랙길에 공백 혹은 0은 실행 할 수 없습니다.");
    return false;
  }
 
  
  var trackCon = $("#trackContainer");
  
  trackCon.empty();
   $("#finshBox").empty();
  $("#carNameContainer").empty();
  for(trackCnt=0; trackCnt < carCnt; trackCnt++){
    var track = $("<div class='track'></div>");
    track.append($("<div id='name"+trackCnt+"' class='car-label'>"+(trackCnt+1)+"번 차 : </div>"));
    
    for(cellCnt = 0; cellCnt < trackLen; cellCnt++){
      track.append($("<div class='cell'></div>"));
    }
    
    trackCon.append(track);
    
    if($("#nameCheck").prop("checked")){
        $("#carNameContainer").append($("<div><label>차이름 : </label><input class='car-nm-input' type='text' onkeyup='applyCarName();'/></div>"));
    }
    var carObj = {};
    carObj.num = trackCnt+1;
    carObj.name ="";
    carObj.move = 0;
    carObj.track = track;
    carObj.finshNum =0;
    carArr.push(carObj);
  }
}
 
 
function applyCarName(){
  var carNames = $(".car-nm-input");
  $.each(carArr, function(index, item) {
     item.name = carNames.eq(index).val();
    
    if(item.name != ""){
      $("#name"+index).text(item.name+" : ");
    }
    
  });
  
  
}
 
function startRace(){
  console.log("start");
  var startNmCheck = true;
  if($("#nameCheck").prop("checked")){
    $.each(carArr, function(index, item) {
      if(item.name == ""){
        startNmCheck = false;
      }
    });
   }
  
  var raceSpd =  $("#raceSpeed").val();
  
  if(raceSpd==""){
    alert("속도에 값을 입력 하여 주십시오");
    return false;
  }
  
  if(!startNmCheck){
    alert("경주할 차 이름을 모두 입력하여 주십시오.");
     return false;
  }
  
  
  
  
  moveAction();
}
 
 
function moveAction(){
  var finsh = true;
  
      $.each(carArr, function(index, item) {
      var moveVal = Math.round( Math.random()*10 );
      if(moveVal > 4){
        item.move++;
         var trackCell = item.track.find(".cell");
        trackCell.eq(0).attr("class","move");
      }
      
      
      if(item.finshNum==0){
        var trackLen =  $("#trackLength").val();
        if(item.move==trackLen){
          finshNum++;
          item.finshNum = finshNum;
          if($("#nameCheck").prop("checked")){
            $("#finshBox").append($("<div>"+finshNum+"등 "+item.name+"</div>"));
          }else{
            $("#finshBox").append($("<div>"+finshNum+"등 "+item.num+"번차</div>"));
          }
          
       
        }
        finsh = false;
      }
      
      
    });
  
  
  if(!finsh){
    setTimeout(function() {
       moveAction();
    }, $("#raceSpeed").val());
  }else{
   
  }
  
}
cs



이렇게 하면


트랙길이, 경주할자동차 대수, 시간 설정이 가능한 자동차 경주 만들수 있음


차이름에 메뉴이름 같은거 적어놓고 사다리 타기 대용으로도 할수 있음.

저작자표시

'Yame Daily Life' 카테고리의 다른 글

나의 부채 이야기  (0) 2019.10.25
[합죽선] 전주 미선공예사, 부채박물관 방문기  (0) 2019.10.11
[달빛조각사] 달조 개꿀팁 및 노하우 모음  (0) 2019.10.10
[리니지2 M] 리니지2 M 공식 영상 및 플레이 영상 모음  (0) 2019.09.06
[리니지2 M] 리니지2 모바일 사전 예약및 사전예약 방법  (2) 2019.09.06

[VUE.JS] 뷰 디렉티브 사용해보기




1. 소개


저번 포스팅에선 뷰를 CDN으로 불러와서 아주 간단하게 맛만보는 방법에 대해서 알아보았다.



이번 포스팅은 그 맛을 조금더 보도록 해보자.



저번 포스팅과 마찬가지로 js피들이나 jsbin 으로 간단하게 해볼수 있는 내용들이다.





vue.js 에는 앵귤러에 있는 디렉티브 라는것이 있다. 앵귤러는 안해봤지만 그런게 있다더라;


엘리먼트에 사용되는 지시문 같은 것인데 사용해보니 오... 이거 좀 짱인듯..


편리한 기능이다!


2. vue 디렉티브 종류



디렉티브의 종류는 13가지 종류가 있고 각 디렉티브의 종류와 기본적인 설명은 여기 에서 확을 해보도록 하자


이번 포스팅에서는 


1) v-text

2) v-html

3) v-show

4) v-if

5) v-else

6) v-else-if

7) v-pre

8) v-cloak

9) v-once



이렇게 9가지에 대해서 알아보도록 하자






3. vue 디렉티브 사용 방법



1)  v-text 디렉티브



저번 포스팅에선 {{}} 이런 모양을 사용했었는데 이번엔 다른 방법으로 엘리멘트 안에 값을 바꿔 보도록 하자


물론 저번과 마찬가지로 jsbin이나 피들을 사용하자


jsbin은  여기서 사용할 수 있다.


이전 포스팅 : 

2018/02/19 - [Yame Programmer/VUE.JS] - [VUE.JS] VUE[뷰] 시작해보기



HTML


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>야매 가이드</title>
</head>
<body>
<div id="app" v-cloak>
  <h1>Hello</h1>
  <h2 v-text="value"></h2>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</body>
</html>
cs



JS


1
2
3
4
5
6
7
8
9
 
// 새로운 뷰를 정의합니다
var app = new Vue({
el: '#app', // 어떤 엘리먼트에 적용을 할 지 정합니다
// data 는 해당 뷰에서 사용할 정보를 가지고 있습니다.
data: {
value:"안녕?"
}
});
cs



결과




오.. !! 간단!!!!





.



2) v-html


v-html 디렉티브는 value 안에 있는 html을 구현해주는건데 


일단 


위의 코드에서


value를 <h5>야매 가이드</h5>


이렇게 바꾸면




이렇게 출력이 되는데



html의 v-text를 v-html로 바꿔보자



html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>야매 가이드</title>
</head>
<body>
<div id="app" v-cloak>
  <h1>Hello</h1>
  <h2 v-html="value"></h2>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</body>
</html>
cs



js


1
2
3
4
5
6
7
8
9
 
// 새로운 뷰를 정의합니다
var app = new Vue({
el: '#app', // 어떤 엘리먼트에 적용을 할 지 정합니다
// data 는 해당 뷰에서 사용할 정보를 가지고 있습니다.
data: {
value:"<h5>야매 가이드</h5>"
}
});
cs



결과



이렇게 html이 적용이 되서 출력이 된다.


그러나 악성코드나 XSS등의 위험이 있으니 필터링 잘 걸어놓고 사용하도록 하자.



3) v-show 디렉티브


v-show는 보여줄지 안보여줄지 지정하는 디렉티브다.




html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>야매 가이드</title>
</head>
<body>
<div id="app">
  <h1>Hello</h1>
  <h2 v-show="visible" v-text="value">하이하이</h2>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</body>
</html>
cs



js


1
2
3
4
5
6
7
8
9
10
 
// 새로운 뷰를 정의합니다
var app = new Vue({
el: '#app', // 어떤 엘리먼트에 적용을 할 지 정합니다
// data 는 해당 뷰에서 사용할 정보를 가지고 있습니다.
data: {
value:"야매 가이드드",
  visible:true
}
});
cs



결과


visible의 값은 true, false 번갈아 가면서 적용을 해보면


true일때는 값이 보이고 false일떄는 보이지 않게 되는 것을 알 수 있다.


그리고  콘솔창에 app.visible = false 입력하면 사라지고


app.visible = true 입력하면 다시 보이게 된다.








4) v-if 디렉티브


v-if는 조건문을 사용 할 수 있는 디렉티브 이다


값이 참이면 보여주고 거짓이면 안보여준다!


html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>야매 가이드</title>
</head>
<body>
<div id="app">
  <h1>Hello</h1>
  <h2 v-if = "value > 5">value가 5보다 큼</h2>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</body>
</html>
cs



js


1
2
3
4
5
6
7
8
9
10
11
 
// 새로운 뷰를 정의합니다
var app = new Vue({
el: '#app', // 어떤 엘리먼트에 적용을 할 지 정합니다
// data 는 해당 뷰에서 사용할 정보를 가지고 있습니다.
data: {
value:2
}
});
 
 
cs



결과


value 가 2일떄




value 9일때









5) v-else 디렉티브



v-if가 있으니 v-else도 있겠지!



html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>야매 가이드</title>
</head>
<body>
<div id="app">
  <h1>Hello</h1>
  <h2 v-if = "value > 5">value가 5보다 큼</h2>
  <h2 v-else>value가 5보다 안크다</h2>
  
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</body>
</html>
cs


js는 위의 코드 그대로 사용 한다.



결과




6) v-else-if


else가 있으니 else if도 있겠지!!




html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>야매 가이드</title>
</head>
<body>
<div id="app">
  <h1>Hello</h1>
  <h2 v-if = "value > 5">value가 5보다 큼</h2>
  <h2 v-else-if = "value == 5">value가 5다!!!</h2>
  <h2 v-else>value가 5보다 안크다</h2>
  
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</body>
</html>
cs




js 생략



value 값만 바꿔보면됨




결과





7) v-pre 디렉티브


v-pre는 엘리먼트를 무시하는데 사용 합니다.


v-pre가 적영된건 지시문이 없다는걸 인식하고 건너뛰어 버립니다.


내부 자식들 신경 안쓰고 건너뛰어 버리니까 컴파일 속도가 빨라지는 효과를 볼 수가 있다.


지금 테스트 하고 있는 cdn으로 불러와서 사용할떈 저 작업이 브라우저 에서 이루어 지는데


기본적으로 빠르긴 해도 규모카 큰 프로젝트에선 성능이슈가 생길 수 있는데


vue 커맨드 라인 인터페이스를 이용해 사전에 빌드 작업을 거치면 해당 이슈 해결이 가능 하다고 한다.


그런데 어케 하는진 모름 ㅋ  그냥 이런 방법이 있다는걸 알아만 두자.





html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>야매 가이드</title>
</head>
<body>
<div id="app">
  <h1>Hello</h1>
  <h2 v-if = "value > 5">value가 5보다 큼</h2>
  <h2 v-else-if = "value == 5">value가 5다!!!</h2>
  <h2 v-else>value가 5보다 안크다</h2>
  <h1 v-pre>{{ 이건 그대로 렌더링해줘요 }}</h1>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</body>
</html>
cs





저기서 v-pre를 빼면 콘솔창에 에러메시지가 나타난다.


그런데 v-pre를 쓰면 에러메세지가 안나타남


{{}} 이 값을 뷰에서 값을 가져오는게 아니라 걍 텍스트로 인식하게 함



결과


v-pre 적용




v-pre 제거하면 아래처럼 컴파일 오류가 생긴다.







8) v-cloak 디렉티브



v-cloak 디렉티브는 뷰js가 역할을 전부 수행하고 난 뒤 화면에 표현해주는 역할을 한다.


보통 컴퓨터들 속도 빨라져서 저 기능을 안써도 될거 같긴 한데


속도가 느린 브라우저에서는 v-if나 v-show 기능으로 안보이게 해놓은 엘리먼트들이


뷰 스크립트 구동전에 화면에 나타나고 뷰가 구동되면 사라지게 되는 깜빡임 현상이 나타낼수 있다.


뷰 컨트롤하는 스크립트가 복잡하고 길어지면 성능 좋은 컴퓨터에서도 깜빡임 현상이 일어날수도 있고.



그래서 아얘 스크립트가 전부 구동이 된 후에 화면을 보여주게 만드는 디렉티브다.



대신에 디렉티브 하나만 넣는게 아니라 아래 css 처럼 기본적으로 display:none 를 해주어야 한다


안그러면 소용이 없다.


html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>야매 가이드</title>
</head>
<body>
<div id="app" v-claok>
  <h1>Hello</h1>
  <h2 v-if = "value > 5">value가 5보다 큼</h2>
  <h2 v-else-if = "value == 5">value가 5다!!!</h2>
  <h2 v-else>value가 5보다 안크다</h2>
  <h1 v-pre>{{ 이건 그대로 렌더링해줘요 }}</h1>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</body>
</html>
cs




css


1
2
3
4
[v-cloak] {
display: none;
}
cs










9) v-once 디렉티브


v-once 는 초기 구동 딱 한번만 값을 지정하고 그 이후엔 변하지 않도록 하는 디렉티브 이다.


렌더링을 한번만 하고 그 이후엔 얘는 건들이지 않겠다 라고 선언하는 것이다.



html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>야매 가이드</title>
</head>
<body>
<div id="app">
  <h1>Hello</h1>
  <h2 v-once>초기 값: {{ value }}</h2>
<h2>현재 값: {{ value }}</h2>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</body>
</html>
cs



js


1
2
3
4
5
6
7
8
9
10
11
 
// 새로운 뷰를 정의합니다
var app = new Vue({
el: '#app', // 어떤 엘리먼트에 적용을 할 지 정합니다
// data 는 해당 뷰에서 사용할 정보를 가지고 있습니다.
data: {
value:5
}
});
 
 
cs



console


app.value = 7


app.value = 0




결과




v-once를 사용하지 않았으면 초기값 현재값 둘다 0이 되어야 하지만


v-once를 사용해 현재값만 0으로 바뀌어 있는걸 확인 할 수 있다.


이 디렉티브는 업데이트 성능을 최적화 할때 사용한다고 하는데


흠.. 뭐 초기값이랑 비교 할떄 사용해도 좋을거 같고 유용해 보인다.



★





9가지 디렉티브들을 살펴 보았는데


처음 vue가 어려우면 어떡하지 하는 걱정과는 다르게


많이 쉽게 접근할 수가 있었다


물론 나중에 CLI로 실제 프로젝트 할떈 또 어떤 헬파티가 열릴진 모르겠지만.



아주아주 간단하게 서버와 상관없이 클라이언트쪽에서만 vue를 활용해볼수도 있겠다


라는 희망을 주기 딱 좋은 맛보기 였던것 같다.


다음 포스팅에선 이번에 포스팅하지 못했던 나머지 디렉티브들에 대해서 살펴 보기로 하자.

저작자표시 비영리

'Yame Programmer > VUE.JS' 카테고리의 다른 글

[VUE.JS] 뷰 디렉티브 v-for [반복] 사용하기  (1) 2018.02.28
[VUE.JS] 뷰 디렉티브 v-bind 사용하기  (2) 2018.02.26
[VUE.JS] VUE[뷰] 시작해보기  (0) 2018.02.19

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


DWGViewX 를 사용해 웹에서 cad 파일을 볼 수 있도록 해주는 도중 파일을 불러오지 못하는 오류가 발생 하였다.


일단 


<object id="DWGViewX" codebase="http://www.autodwg.com/dwgviewx/dwgviewx.cab" height="520" width="700" classid="clsid:AC53EFE4-94A7-47E6-BBFC-E9B9CF322299">

                        <param name="_Version" value="65536">

                        <param name="_ExtentX" value="18521">

                        <param name="_ExtentY" value="13758">

                        <param name="_StockProps" value="0">

                       <param name="DrawingFile" value="불러올 파일이 있는 경로">

                        <param name="ShowToobar" value="-1">

                        <param name="ShowLayoutBar" value="1">

                        <embed name="DWGViewX" width="700" height="520" type="DWGVIEWXLib.DwgViewX" showtoolbar="-1" showlayoutbar="1" pluginspage="http://www.autodwg.com/dwgviewx/dwgviewx.cab" title="undefined">

                    </object>



사용방법은 html안에 이렇게 사용해 넣으면 된다.


DrawingFile 파라메터의 밸류값에 불러올 파일이 있는 경로를 지정해 주면 된다.


절대경로를 사용한다면 클라이언 PC의 경로를 뒤진다 (ex) C/programs/..........기타등등)


서버에 있는 파일을 보여주고 싶다면


경로값이 해당 dwg파일을 다운로드 받는 url을 넣으면 해당 파일을 보여준다.



문제는 자꾸 no mapping uri가 나타나면서 에러가 나고 하얀색 화면만 나타난다는 점이다.


해당 경로를 브라우저의 URL창에 넣으면 파일은 정상적으로 다운로드가 되지만 dwg뷰어에서는 해당 url를 찾지 못한다고 나올 뿐이다.


어노테이션 설정에 문제가 있는 건지 한참을 뒤져보다가 원인을 찾게 되었다.


원인은 DrawingFile의 value값이 중간에 인코딩이 되어 요청된다는 것이다.


한글은 깨지고 영문은 전부 소문자로 변환된 후 요청을 한다.


해결방법은 그냥 호출받는 주소를 전부 소문자로 바꿔줘 버렸다...

파일이름은 파일이 업로드 될때 실제 저장된 파일이름은 UUID로 바꾼후에 영문소문자로 바꿔서 저장을 하도록 했다.


이제 도면파일 잘나온다.


액티브X 사라져버렸으면 좋겠다.

저작자표시 비영리

'Yame Programmer > 전자정부프레임워크' 카테고리의 다른 글

서버[tomcat] 실행시 클래스 실행  (0) 2016.05.24
톰캣[tomcat] context간 세션 공유  (0) 2016.05.24
파일 다운로드할때 파일이름 원래 이름으로 바꾸기  (7) 2016.01.08
ie , 익스플로러 ajax 버그 (이전 데이터를 계속 불러오는 버그)  (0) 2015.12.18
이클립스 heap 힙메모리 , 속도향상  (0) 2015.12.17

+ Recent posts

티스토리툴바