Chart.js란?

HTML5 캔버스를 사용하여 플랫 그래프를 쉽게 만들 수있는 자바 스크립트 라이브러리.
입문 기사는 Qiita내에도 이미 투고가 있으므로 할애합니다.
이 기사는 Version: 1.0.2를 사용합니다.

이번 개요

눈금 값의 커스터마이즈를하고 있었을 때에 조금 빠져 버렸으므로, 공유시켜 주려고 생각합니다.

눈금 값 사용자 정의

원래 눈금이 나오는 것은 상기의 3 타입의 그래프.
막대 그래프, 선 그래프, 닭 머리 그림(Polar area chart)이 됩니다.
여담입니다만, 닭 머리도는 그 나이팅게일이 고안했다고 합니다. 다재다능.

기본적으로 눈금 값을 그대로 표시하도록 되어 있습니다.

Chart.js

90          // Interpolated JS string - can access value
91          scaleLabel: "<%=value%>",

이 옵션을 설정하고 덮어쓰면 눈금 값의 형식을 변경할 수 있습니다.

예를 들면 건강계의 앱으로 체중의 추이를 그래프화하는 경우는, 이하와 같이 단위를 부여해 주면 단위가 표시됩니다.

samples/bar.html

37      var ctx = document.getElementById("canvas").getContext("2d");
38      window.myBar = new Chart(ctx).Bar(barChartData, {
39          responsive : true,
+           scaleLabel: "<%=value%> kg",
40      });

툴팁을 표시하고 있는 경우는, 툴팁의 포맷도 편집해 주지 않으면 위 그림과 같이 되어 버립니다.
툴팁의 값의 포맷 지정 개소는 2개 있어, 위 그림과 같이 2 개 이상의 데이터 세트를 사용하고 있는 경우는 multiTooltipTemplate 에, 데이터 세트가 1 개만의 경우는 tooltipTemplate 를 사용합니다.

samples/bar.html

37      var ctx = document.getElementById("canvas").getContext("2d");
38      window.myBar = new Chart(ctx).Bar(barChartData, {
39          responsive : true,
            scaleLabel: "<%=value%> kg",
+           multiTooltipTemplate: "<%=value%> kg"
40      });

이제 툴팁에도 단위 kg이 표시됩니다.

자리 구분은 요주의

문제점

그런데, 여기부터가 이번의 본제입니다.

단위가 "원"의 그래프를 작성하려고 했으므로, 값도 자리수 단락시켜 하고 싶고 다음과 같은 코드를 썼습니다.

samples/bar.html

+-14    var randomScalingFactor = function(){ return Math.round(Math.random()*10000)}; //100 -> 10000 4桁を超えるように
|
37          var ctx = document.getElementById("canvas").getContext("2d");
38          window.myBar = new Chart(ctx).Bar(barChartData, {
39              responsive : true,
+               scaleLabel: "<%=value.toLocaleString()%> 円",
+               multiTooltipTemplate: "<%=value.toLocaleString()%> 円"
40      });

그러면 ...



같은 코드를 기재하고 있는데, 왠지 툴팁만 자리수 단락지어져, Y축의 눈금은 그대로입니다.
Chart.js가 뭔가 내부에서 하고 있는지 디버그해 보았습니다만, 최종적으로 어느쪽이나 같은 객체에 대해서 toLocaleString() 하고 있어, 그 결과가 다르다고 하는 잘 모르는 상태에・・・.

해결책

.toLocaleString() 을 사용하지 않고 Intl.NumberFormat 을 사용하면 잘 작동했습니다.

samples/bar.html

+-14    var randomScalingFactor = function(){ return Math.round(Math.random()*10000)}; //100 -> 10000 4桁を超えるように
|
37          var ctx = document.getElementById("canvas").getContext("2d");
38          window.myBar = new Chart(ctx).Bar(barChartData, {
39              responsive : true,
+               scaleLabel: "<%=new Intl.NumberFormat().format(value) %> 円",
+               multiTooltipTemplate: "<%=new Intl.NumberFormat().format(value) %> 円"
40      });

하지만 뭔가 힘들게 떨어지지 않는다. 이유 아는 분 계시면 꼭 가르쳐 주세요.