개발로그

얼마전 Chart.js로 그래프 작업을 하면서 겪었던 황당한 버그였는데 혼자 몇 분간 삽질하다가 구글에 검색해보니 생각보다 간단하고 명확한 이유여서 빠르게 해결할 수 있었다. 한 캔버스에서 일간, 주간, 월간 버튼을 클릭할 때 마다 다르게 보여지게 구현해야해서 하나의 변수에 그래프 데이터를 저장해두고 사용자 이벤트가 발생할 때 마다 해당 변수의 datasets 프로퍼티에 그래프 데이터를 할당해주었는데 그래프의 특정 포인트에 마우스 오버 할 때 마다 이전 데이터가 화면에 나타나는 것이다. (예를 들어, 월간 클릭된 상태인데 처음에 로드한 일간 데이터 바뀜) 게다가 마우스를 움직이면 또 새로운 그래프로 나왔다가 왔다갔다 함... 처음엔 너무 황당한 버그라서 어디서부터 손을 대야할지도 몰랐는데, 검색하니 바로..

Chart.js를 이용해서 그래프를 그릴 경우, 태그에다가 그려넣기 때문에 사이즈 조절을 하려면 canvas태그를 감싸고 있는 태그의 크기를 조정해줘야만 반영된다. 그러나 가끔 라벨의 길이가 길어지면 canvas 영역을 벗어나는 경우가 생기는데, chart.js에서 라벨의 위치를 조정하는 옵션은 따로 제공하지 않는것 같다. (당연히 있을줄 알고 문서를 뒤지느라 시간이 좀 걸렸다.) 아무튼 검색을 거듭한 끝에 스택오버플로우에서 발견한 방법으로 해결했는데, 좀 꼼수같긴 하지만 가장 확실한 방법이기도 하다. labels: ['라벨1 ', ' 라벨2'], 이렇게 라벨에 공백을 주어서 글자가 안잘려 보이도록 하는것!! 오른쪽이 잘린다면 뒤에 공백, 왼쪽이 잘린다면 앞에 공백. 완전히 꼼수이지만 똑똑한 발상이다....