반응형 차트

창 크기를 기준으로 차트 크기를 변경하는 경우, 캔버스 렌더링 크기(canvas.width 와 .height)를 디스플레이 크기(canvas.style.width 와 .height)와 달리 상대 값으로 표현할 수 없다는 주요 제한 사항이 있습니다. 더욱이, 이 크기들은 각각에 독립적이므로 캔버스 렌더링 크기는 디스플레이 크기에 자동으로 맞출 수 없어, 렌더링 크기를 부정확하게 만듭니다.

다음의 예제들은 동작하지 않습니다:

• <canvas height="40vh" width="80vw">: 올바르지 않은 값, 캔버스는 조정되지 않습니다 (예제)
• <canvas style="height:40vh; width:80vw">: 올바르지 않은 행위, 캔버스는 조정되지만 모호해집니다 (예제)

Chart.js는 캔버스 디스플레이 크기가 변할 때와 그에 맞춰 렌더링 크기가 수정될 때를 탐지하여 차트의 크기 조정 동작들을 제어하고 반응할 수 있는 몇개의 옵션들을 제공합니다.

옵션 설정

중요 사항

캔버스 크기가 변할 때 canvas 요소로 부터 직접 수행할 수 없을 때 감지합니다. Chart.js는 캔버스 렌더링과 디스플레이크기를 수정할 때 부모 컨테이너를 사용합니다. 그러나, 이 메소드는 상대적인 위치에 있는 컨테이너와 차트 캔버스에만 사용할 것을 요구합니다. 컨테이너 크기에 대한 상대적인 값에 설정하여 응답성을 얻을 수 있습니다 (예제):

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

컨테이너 크기를 수정함으로 차트를 프로그래밍 적으로 크기 조정할 수 있습니다:

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

위의 코드에서 차트 높이의 재조정을 정확하게 하기 위해, maintainAspectRatio 옵션을 반드시 false로 설정해야 함을 주의하세요.

크기조정이 가능한 차트 그리기

CSS 미디어 쿼리는 페이지를 프린팅 할 때 스타일이 변경되는 것을 허용합니다. The CSS는 차트에 크기 조징이 필요할지도 모를 때 이 미디어 쿼리를 통해 적용합니다. 그러나, 크기조정은 자동으로 발생하지 않을 것입니다. 페이지를 그릴 때 크기가 조절되는 차트를 지원받기 위해선, onbeforeprint 이벤트와 수종으로 각각의 크기 조정 트리거의 연결이 필요합니다.

function beforePrintHandler () {
    for (var id in Chart.instances) {
        Chart.instances[id].resize();
    }
}