728x90
반응형

Chart.js 2

Chart.js Canvas Size OnResize Example

Chart.js에서 Canvas Size 바꾸기 chart.js에서 canvas size를 바꾸기 어려운 이유는 캔버스의 크기를 상위 태그에서 선지정을 하기 때문이다. 그러니까 이미 캔버스의 크기가 그려지고, 그 내부에서 차트가 그려지기 때문에 고정된 캔버스의 크기 안에 차트가 어떻게든 찌그러들거나 늘어나거나 해서 그려진다는 이야기이다. 그래서 Canvas 크기 자체를 바꾸기 위해서는 다른 방법을 사용해야하는데, asPectRatio 값을 바꿔서 차트 사이즈를 바꾸는 것도 가능하지만 더 편한 방법은 onResize 함수를 사용하는 것이다. onResize 함수는 사후적으로 canvas parantNode의 style을 바꿔준다. 아래 예시는 데이터의 길이에 따라서 canvas의 높이를 dynamic하게 ..

Chart.js 로 인구피라미드 차트 그리기

가끔씩 차트를 그리다 보면 성/연령대별로 인구 분포를 나타내기 위해서 인구피라미드 차트를 그려야 할 때가 있다. 영어로는 population pyramid라고 할 때도 있고 age pyramid라고 할 때도 있는 듯하다. Chart.js에서는 인구피라미드 차트를 Stacked Bar 차트를 활용해서 아주 간단하게 그릴 수 있다. 위의 차트를 그리기 위한 코드를 전체로 복붙해서 쓸모없는 부분이 일부 있기는 하지만 1) Datasets에서 데이터를 음수로 바꿔주는 부분 2) indexAxis를 'y'로 지정해서 90%로 차트를 회전시키는 부분 3) xAxes에서 음수 ticks를 양수로 바꿔주는 부분 이 가장 핵심이다 import styled from "@emotion/styled"; import React..

728x90
반응형