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}


이렇게 지정해 놓으면 된다

+ Recent posts