chart.js

Responsive

원문 : http://www.chartjs.org/docs/latest/general/responsive.html


 

Responsive Charts


창 크기를 기반으로 차트 크기를 변경하는 경우 중요한 제한사항 :

display size ( canvas.style.width / .height ) 과는 다르게

render size ( canvas.width / . height ) 는 relative value 를 사용할 수 없다.

또 이러한 크기는 서로 독립적이기 때문에

display size 가 render size 에 따라 자동으로 저정되지 않으므로 렌더링이 부정확하다.

 

피해야 할 예

<canvas height="40vh" width="80vw"> <!-- 잘못된 값, 캔버스 크기가 조정되지 않음 -->

<canvas style="height:40vh; width:80vw"> <!-- 잘못된 동작, 캔버스 크기가 조정되었지만 흐려짐 -->

 

chart.js 는 캔버스의 display size 가 변경되면 render size 크기를 업데이트하는 몇가지 옵션을 제공한다.

 

Configuration Options

Name Type Default 설명

 

responsive

 

Boolean

 

ture

 

컨테이너에 따라 캔버스 크기 조절

 

 

responsiveAnimationDuration

 

Number

 

0

크기 조정 이벤트 후 새 크기로 

애니메이션을 적용하는 데 걸리는 시간

(밀리초)

 

maintainAspectRatio

 

 

Boolean

 

true

크기를 조정할 때 원본 캔버스

종횡비 유지

 

onResize

 

Function

 

null

크기 변경 발생시 호출, 

"차트 인스턴스", "새 크기" 

두개의 인수를 가져옴

 

Important Note

canvas size 의 변경된 시점을 감지하는 것은 canvas 요소 자체에서는 할 수 없습니다.

chart.js 는 부모 컨테이너를 사용하여 canvas 의 render / display 크기를 업데이트 합니다.

그러나 이 방법을 사용하려면 컨테이너를 배치하고 chart canvas 전용으로 사용해야 합니다.

컨테이너 크기에 대한 상대 값을 설정하여 반응형으로  만들 수 있습니다.

<div class="chart-container" style="position: relative; height:40vh; width:80vw">
    <canvas id="chart"></canvas>
</div>

차트는 컨테이너 크기를 수정하여 프로그래밍 방식으로 크기를 조정할 수도 있습니다.

chart.canvas.parentNode.style.height = '128px';

 

댓글

댓글 본문
작성자
비밀번호
버전 관리
gamza
현재 버전
선택 버전
graphittie 자세히 보기