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}


이렇게 지정해 놓으면 된다

개발할때마다 가장 귀찮았던 것 중 하나는 천단위마다 콤마를 찍어주는 것이었다.


처음엔 문자열로 변환하고 글자 개수를 세고 3개를 기준으로 앞뒤를 잘라서 분리하고


그사이에 콤마를 집어넣는 아주아주 귀찮은 방법을 사용했다가


정규식을 사용하여 아주아주 간편하게 천단위마다 콤마를 찍어줄수 있다는걸 알게 되었다.


로직은 굉장히 간단하다.


1
2
3
4
function numbeComma(number) {
    return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
 
cs


이게 끝이다.


그동안의 천단위 콤마찍는 귀찮음에서 한번에 해방되는 느낌이다.


예전에 인터넷 돌아다니다 발견했던건데


이거 만든 사람 상줘야 한다.


정규식이라는 개념을 만들어낸 사람도 참 대단하다. 스크립트에서도 그렇고 SQL에서도 그렇고


요즘 정규식이라는걸 참 유용히 잘 사용하고 있다.

+ Recent posts