[chart.js] 너비 및 높이 설정

Program / 글쓴이

문서에 제공된 Chart.js의 예제 코드를 시도하고 있습니다.

너비와 높이는 캔버스 요소에 400px / 400px로 인라인으로 지정됩니다.

그러나 차트를 렌더링 할 때 전체 페이지 너비로 확장되고 맨 오른쪽 끝이 잘립니다.

예보기

차트의 너비 / 높이를 어떻게 / 어디서 제어해야합니까?

This is some bogus text because SO prohibits linking to Codepen otherwise.

답변

캔버스 스타일 너비를 재정의 할 수 있습니다!

canvas{

  width:1000px !important;
  height:600px !important;

}

또한

responsive:true,옵션에서 속성을 지정 합니다.

options: {
    responsive: true,
    maintainAspectRatio: false,
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero:true
            }
        }]
    }
}

추가 된 옵션 아래 업데이트 : maintainAspectRatio: false,

링크 : http://codepen.io/theConstructor/pen/KMpqvo

답변

차트를 컨테이너로 둘러 쌀 수도 있습니다 (공식 문서 http://www.chartjs.org/docs/latest/general/responsive.html#important-note 에 따라 ).

<div class="chart-container">
    <canvas id="myCanvas"></canvas>
</div>

CSS

.chart-container {
    width: 1000px;
    height:600px
}

및 옵션

responsive:true
maintainAspectRatio: false

답변

제 경우에는 responsive: false옵션을 전달 하면 문제가 해결되었습니다. 특히 true가 기본값이기 때문에 왜 모든 사람들이 반대로하라고 말하는지 잘 모르겠습니다.

답변

나를 위해도 작동

responsive:true
maintainAspectRatio: false


<div class="row">
        <div class="col-xs-12">
            <canvas id="mycanvas" width="500" height="300"></canvas>
        </div>
    </div>

감사합니다

답변

나는 아무도 상대 부모 요소를 사용하는 것에 대해 이야기하지 않았다는 것을 믿을 수 없습니다.

암호: 

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

출처 : 공식 문서

답변

아니 이상 만 사용하여 언급 한 max-width나 max-height또한 캔버스 요소에 가능성이있다.

답변

아래는 나를 위해 일했습니다-그러나 이것을 “옵션”매개 변수에 넣는 것을 잊지 마십시오. 

var myChart = new Chart(ctx, {
type: 'line',
data: data,
options: {
    maintainAspectRatio: false,
    responsive:true,
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero: true
            }
        }]
    }
}
});