ChartJS 캔버스 너비를 설정할 수 없습니다

Question

ChartJS를 200px로 제한 할 수 없습니다. 브라우저의 전체 너비가 필요합니다. 나는 무엇이 없는가. 나는 다음과 같은 CDN

<div id="pnlChart" style="height:200px" > 
    <canvas id="myChart" width="400" height="200" class="chart" ></canvas> 
</div> 

을 사용하고

서버에서 반환되는 내 데이터가 잘 형성 올바르게 차트 그리기 것으로 보인다. 폭/높이가 없습니다. Chrome의 개발자 도구에서이 코드를 가져 왔습니다.

{ "type": "line", "labels": [02678910,11,12,13,14, [데이터 ","데이터 ": [2,1, 2, 3, 8,36,119,179,214,165,87,173,2200000000000000]}]

Answer 1

이 컨테이너 너비 채우기를 비활성화 할 수 있어야합니다. 응답 모드를 사용하지 Chart.js 알려주는 행동 차트의 ​​전역 구성에이 전달 시도 (옵션의 가장 높은 수준).

options: { 
    responsive: false 
} 

이 전체의 정의에 맞는 방법의 예를 들어 the Chart.js documentation를 참조하십시오 한 채널 미술.

어떤 이유로 작동하지 않는다면 그래프가 그려지는 canvas을 포함하는 div 요소의 너비를 제한 할 수 있습니다. 귀하의 예를 바탕으로 당신이 당신의 CSS에이를 추가 할 수

div#pnlChart {width: 200px} 

당신이 작동하려면 다음 방법 중 하나를 얻을 수없는 경우에도, 이상적으로 당신은 그것을 만들기 때문에 요즘 항목에 대한 고정 폭을 지정되고 싶지 않아 현재 사용중인 수많은 장치 화면에서 페이지를 잘 표시하는 것이 어렵습니다.

작은 스마트 폰에서 대형 데스크톱 모니터에 이르기까지 모든 화면 너비에 맞게 조정되는 반응 형 레이아웃을 사이트에서 개발하는 것이 훨씬 낫습니다. 이 주제에 대한 기사의 "반응 형 디자인"에 대한 온라인 가이드를 검색하십시오.