기타치는 개발자의 야매 가이드

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

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

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

코드는 아래와 같습니다.

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

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

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

두번째 방법은

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

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

오브젝트를 생성하고 특정 데이터의 개수에 따라

속성을 추가적으로 생성해야 하는 경우가 있으나 

속성의 이름을 지정하지 못해 곤란해 했던 경우가 있다.

일반적인 오브젝트의 속성 추가는

위와 같이 이루어 지지지만 데이터의 개수만큼 time뒤에 들어가는 숫자가 바뀌어야 한다면

아래와 같이 작성을 해주면 된다.

자바스크립트로 화면을 구현하다 보면 같은 행동을 반복하게 하는 애니매이션이나 로직을 구현해야 하는 경우가 종종 생긴다.

간단한 예로 디지털 시계 같은걸 구현한다던가 

매시간마다 데이터를 계속해서 요청을 한다던가

이럴때 setInterval 함수를 사용한다.

방법은 간단하다.

setInterval(실행할 function이름,반복할시간단위);

ex) setInterval(getChartData,1000);

getChartData라는 펑션을 1초마다 반복한다는 것이다.

getChartData 대신에 펑션을 직접 입력해도 된다

setInterval(function(){

alert('1초가 지났어요');

},1000);

위처럼 해도 무방하다

추가로 반복을 멈추고 싶을땐

var interval = setInterval(getChartData

,1000);

위와같이 선언후 실행하다

멈추고 싶을떄

clearInterval(interval);

해주면 된다.

/*-----------------------------------------<create PopUp> ---------------------------------------------*/

 $(".layerPopup").click(function (event){ // 버튼 클릭시 실행 이벤트

  var height=0;

  var width=0;

// var cssUri = $(this).attr("data-css");

 var mappingUri = $(this).attr("name"); //클릭한 객체의 name값에 요청할 URL을 미리 넣어놓고 사용

//  alert(mappingUri);

     var s_w =$(document.body).width();

     var w=500;

     var left = s_w/2 - w/2;

     if(s_w/2 < w/2)

     left=0;

     // create wrapper

     var wrapper=$("<div />");

     wrapper.css({

    width:"0px",

    height:"0px",

    border:"2px solid #000",

    background:"#fff",

    position:"absolute",

    left: left,

    top:"100px",

     });

     var screenH = $(document).height();

     // create screen & run animation

        var screen = $("<div />");

        screen.css({

           width:"100%",

           height:screenH,

           background:"#000",

           position:"absolute",

           left:"0px",

           top:"0px",

           opacity:"0",

            zIndex:22

        }).animate({opacity:"0.5"},500,function(){

        $(document.body).append(wrapper);

        // setting CSS

           var link = document.createElement("link");

            link.setAttribute("rel","stylesheet");

            link.setAttribute("type","text/css");

          //  link.setAttribute("href", cssUri);

            document.getElementsByTagName("head")[0].appendChild(link); 

          //  alert(mappingUri);

            // Load popUp Page

            wrapper.load(mappingUri,function(){

            // load popUp Page's size

                var first=wrapper.children("div").eq(0);

                console.log(first);

                 width= first.outerWidth();

                 height = first.outerHeight();

                 console.log(width);

             left = s_w/2 - width/2;

             if(s_w/2 < w/2)

             left=0;

                 screen.attr("id","screen");

                 wrapper.attr("id","newWapper");

                 wrapper.animate({

                 width:width,

                 "z-index":"23",

                 left:left

                 },500)

                 .animate({

                     height:height

                     },500);

                 // remove popUp Page&screen

              $("#screen").click(function(){

             wrapper.animate({

                     width:"0px"

                     },500)

                     .animate({

                         height:"0px"

                         },500,function(){

                         screen.animate({

                             opacity:"0"

                             },500);

                         wrapper.detach();

                         screen.detach();

                         });

            });

             });

        });

        $(document.body).append(screen);

        // resizing

        $(window).resize(function() {

        s_w =$(document.body).width();

         var left = s_w/2 - w/2;

         if(s_w/2 < w/2)

         left=0;

           wrapper.css({left: left });

      });

     });

/*-----------------------------------------</create PopUp> ---------------------------------------------*/

문자열을 자르기가 있다는걸 알고 있지만

함수 이름은 너무나도 잘 잊어먹게 된다. 

그리고 아주 자주 사용하는 함수이고 매우 유용한 함수이다 

var string = 'hello yamea programer'

var strArr = string.split('-');

문자열에서 - 라는 문자를 기준으로 잘라서 배열로 담는다.

string.substring(시작인덱스,끝인덱스);

첫글자는 0이다

string.substr(시작인덱스,길이)

위와 동일하지만

시작인덱스 부터 길이 만큼 자른다는 것

자바스크립트를 사용하면서 문자열에 데이터를 넣다보면 특수문자 때문에 구글링은 하는 경우가 많다.

이 포스팅을 보는 당신도 바로 그와 같은 경우겠지 

어디서 퍼와서 어딘가에 저장했던 글인데 어디서 퍼온건지 기억이 안나지만 저위에 아이디가 있는걸 보아 저분이 

작성하신 글인거 같다.. 블로그 하기 전에 복사해서 보관하던 건데

혹시나 저분이 이 포스팅을 언짢아 하신다면 바로 내리고 사과하겠습니다.

포스팅이 도움이 되셨다면 마우스를 조금만 움직여서 

공감하기를 눌러주세요 블로거에게 큰 힘이 됩니다~!