chart.js, canvas 크기 고정하는 방법 (feat. motion chart)

-


Photo by Isaac Smith on Unsplash


요약

  • chart.js는 canvas에 차트를 그린다. 이 때 canvas의 크기는 반응형이다. 
  • canvas의 크기를 고정하려면 option에 responsive: false를 추가한다. 
  • 가로와 세로축의 범위를 지정하려면 scale 옵션에서 suggestedMin과 suggestedMax 값을 지정한다. 



왜?

chart.js를 사용해서 차트를 그리면 브라우저 크기나, 데이터에 따라 차트의 기울기가 달리 보인다. 일반적인 경우라면 별 문제가 없을 것 같다. 하지만 여러 데이터를 비교해서 보다 보면 조회하는 데이터에 따라 범위와 기울기가 달라져서 오해를 하게 되는 경우가 생겼다. 

그래서 차트를 그리는 canvas의 크기와 데이터의 범위를 고정할 수 있는 방법을 찾았다. 



canvas의 크기 고정하기

chart.js를 사용할 때 canvas의 크기를 고정하는 방법은 간단하다. 아래 코드를 option에 추가하면 된다. 




데이터 범위 고정하기

데이터의 범위를 고정하는 방법도 간단하다. 가로 축과 세로 축의 최소값과 최대값을 option에서 지정해 주면 된다. 



적용 예시






댓글

댓글 쓰기

이 블로그의 인기 게시물

lenovo E420에 ssd 추가

-
이미지
Photo by cetteup on Unsplash Lenovo ThinkPad Edge E420 2012년 4월에 샀으니, 4년 정도 되었구나. 오래 쓰기도 했거니와, HDD를 사용하고 있으므로 체감 속도가 현저히 느려졌다. 그렇다고 CPU나 메모리가 부족한 편은 아니기에 SSD를 추가해서 조금 더 이용하기로 했다.  SSD 추가 E420에 SSD를 추가하는 방법은 몇 가지 조합이 있을 수 있겠다. 내 경우는 ODD를 제거하고 그 자리에 멀티부스트(12mm)를 이용하여 기존 HDD를 장착하였다. 그리고 기존 HDD 자리에는 2.5인치 SSD를 장착하였다. SSD에는 OS와 프로그램을 설치하고, 자료는 HDD에 보관하면 용량 면에서도 이용하는 데 별 불편은 없을 것 같다.  체감 속도 개선 SSD 설치 후 OS 설치부터 체감 성능이 확 달라졌다. 설치도 빠르고, 부팅도 빨라지고, 프로그램 실행 속도도 만족스럽다. E420은 SATA2까지만 지원한다고 하는데, SATA3와 비교해서 큰 차이점은 없는 것 같다. 
Read more »

눈뜬 자들의 도시

-
이미지
눈뜬 자들의 도시 (리커버 에디션) - 주제 사라마구 지음, 정영목 옮김/해냄 왜? 눈뜬 자들의 도시? 그런 영화를 봤었는데? 아, 그건 '눈먼 자들의 도시' 였다. 시간가는 줄 모르고 봤던 기억이 났다. '눈뜬 자들의 도시'는 '눈먼 자들의 도시'를 쓴 작가의 작품이라고 한다. 영화를 재미있게 봤었고, 또 그 이후의 이야기라고 하니 궁금해서 읽게 되었다.  간략한 줄거리 투표 결과 백지투표가 80% 였다. 위정자들은 당황한다. 위정자들은 정부와 공무원들을 도시 바깥으로 이전시키고, 도시를 봉쇄한다. 그러나 예상과 달리 무정부 상태의 도시는 평온하다.  위정자들은 도시 스스로 혼란에 빠지지 않자 고의로 테러를 일으킨다. 무고한 희생자만 생겨날 뿐 혼란은 없다. 혼란에 빠져 엉망진창이 된 도시의 구원자가 될 수 있는 가능성은 없어 보인다.  결국 위정자들은 수단과 방법을 가리지 않는다. 정부의 음모는 희생자를 찾아서 자신들의 정당성을 되찾으려고 한다. 4년 전 그 사건 때, 유일하게 눈이 멀지 않았던 그녀에게 그림자가 드리운다.  양심선언 도시에는 계엄령이 내려졌다. 정부는 희생자의 범죄 증거를 찾기 위해서 경찰을 파견했다. 파견된 경찰로써 임무를 수행하던 경정은 혼란에 빠졌다.  죄의 증거가 발견되지 않으면 어떻게 됩니까. 무죄의 증거가 발견되지 않았을 때와 똑같은 일이 벌어지지. 결국 경정은 신문사를 찾아가 정부의 음모를 밝힌다. 그리고 진의를 의심하는 신문사 발행인에게 이야기 한다.  우리가 태어날 때, 이 세상에 들어올 때, 우리는 우리 인생의 나머지 기간 동안 지킬 협정을 맺는 셈입니다. 하지만 우리 자신에게 이렇게 묻게 될 날이 올지도 모릅니다, 누가 내 대신 여기 서명을 했지, 글쎄요, 나는 스스로 그런 질문을 했고, 그 답이 이 편지입니다.   그렇게 경정은 자신의 남은 인생을 희생한다. 자신의 손으로 무고한 사람을 희생시킬 수 없기에, 자신을 희생한 것이다. 경정과 같은 사람들의 희생과 진실이 묻히지
Read more »

Oracle SQL Developer에서 Date 타입의 출력 형식 변경하기

-
이미지
Oracle에서 배포하는 SQL Developer에서 Date 형식을 출력하는 기본값은 'RR/MM/DD'로 설정되어 있다. 그래서 질의결과 창에 출력되는 데이터에서는 일자까지만 확인할 수 있으며, 시간은 확인할 수가 없다. '도구 > 환경설정'에는 위 그림과 같은 Date 형식을 원하는 형식으로 변경할 수 있는 옵션을 제공한다. 아래 그림에서 '날짜 형식' 부분을 원하는 Date 형식으로 변경하면 바로 적용된다.  Date 형식을 ‘YYYY/MM/DD HH24:MI:SS’로 변경한 경우, 아래 그림처럼 출력 형식이 변경된 것을 확인할 수 있다. 
Read more »