Charts.js 그래프가 캔버스 크기로 조정되지 않습니다.

Question

Charts.js로 그래프를 만들려고합니다 (현재 차트는 Chart.js 문서에서 취한 간단한 예제입니다) 그래프는 캔버스 크기에 맞게 조정되지 않습니다. 다음은 관련된 모든 코드입니다.

을 가져 오려면 다음

 <div id="graph_2015" class ="stats_box"> 
      <h4>Graph 2015</h4> 
      Text 
      <canvas id="myChart" width="200" height="200"></canvas> 
     </div> 

그리고 :

<script type="text/javascript" src="js/stats_tab.js"></script> 

내 캔버스가 설정 한 다음과 같이 다음

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.bundle.min.js"></script> 

, 나는 자바 스크립트 파일에 연결 마지막으로 stats_tab.js에 다음 코드가 있습니다.

window.onload=function(){ 
    var ctx = document.getElementById("myChart").getContext("2d"); 
    var myChart = new Chart(ctx, { 
     type: 'line', 
     data: { 
      labels: [1,2,3,4,5,6,7,8,9,10], 
      datasets: [ 
       { 
        label: "My First dataset", 
        data: [1,2,3,2,1,2,3,4,5,4] 
       } 
      ] 
     }, 
     options: { 
     } 
    }); 
} 

그래프는 멋지게 표시되지만, 내가 준 캔버스의 크기에 맞게 조정되지 않습니다. 관련된 div에 관련된 CSS도 없습니다. 크롬의 검사 기능을 사용하면 최종 그래프가 지정된 200 x 200 대신 676 x 676임을 알 수 있습니다. 무슨 일이 일어나고 있는지 잘 모르겠다.

감사합니다.

Answer 1

This.

var ctx = document.getElementById("myChart").getContext("2d"); 
ctx.canvas.width = 200; 
ctx.canvas.height = 200; 
var myChart = new Chart(ctx,......... 

참고 : 기본적으로, 당신의 자바 스크립트에 너비와 높이 속성을 추가 Chart.js canvas resize

Answer 2

Chartjs '응답 모드가 false 인 경우 캔버스에 설정 한 너비와 높이 속성에만 작동 (이 기본적으로 true입니다. stats_tab.js를 이렇게 변경하면 제대로 작동합니다.

window.onload=function(){ 
     var ctx = document.getElementById("myChart").getContext("2d"); 
     var myChart = new Chart(ctx, { 
      type: 'line', 
      data: { 
       labels: [1,2,3,4,5,6,7,8,9,10], 
       datasets: [ 
        { 
         label: "My First dataset", 
         data: [1,2,3,2,1,2,3,4,5,4] 
        } 
       ] 
      }, 
      options: { 
       responsive: false 
      } 
     }); 
    } 

Answer 3

중요한 점은 다음과 같습니다 width 및 height 속성 픽셀하지만 비율의 크기가 아니다.

<canvas id="myChart" width="400" height="400"></canvas> 

이 예에서는 1 : 1 비율입니다. 따라서 HTML 컨트 넨트가 676 픽셀 너비이면 차트는 676 * 675 픽셀입니다.
일반적인 실수를 설명 할 수 있습니다.

maintainAspectRatio을 false로 설정하여이 기능을 비활성화 할 수 있습니다.