chart.js 크기를 변경할 수 없습니다.

<html> 
<head> 
    <meta charset="utf-8"> 
    <link rel="stylesheet" type="text/css" href="/css/graph2.css"> 
    <title>Graph</title> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js"></script> 

</head> 
<body> 
    <canvas id="updating-chart" width="200" height="200"></canvas> 
</body> 
</html>

이것은 내가 사용하고있는 html이며 Chart.js 2.1.4을 사용하고 있지만, 내가하는 일을 막론하고 크기를 줄일 수 없습니다.chart.js 크기를 변경할 수 없습니다.

자바 스크립트 :

<script type="text/javascript"> 
var canvas = document.getElementById('updating-chart'), 
    ctx = canvas.getContext('2d'), 
    startingData = { 
     labels: ["A", "B", "C", "D"], 
     datasets: [ 
      { 
      label: "Product A", 
      fillColor: "rgba(220,220,220,0.5)", 
      strokeColor: "rgba(220,220,220,0.8)", 
       pointColor: "rgba(220,220,220,1)", 
       pointStrokeColor: "#fff", 
       data: [65, 59, 80, 81] 
      } 
     ] 
    }; 

var myLiveChart = new Chart(ctx,{ 
    type: 'bar', 
    data: startingData, 
    responsive: true, 
    maintainAspectRatio: true 
}); 
</script>

나는이 문제를 어떻게 해결할 수 있습니까? 나는 항상 canvas HTML 필드에서 무엇을 변경하더라도 전체 화면을 완전히 덮는 정말 큰 그래프를 얻습니다.

도움 말?

출처

2017-04-25 sssszzzzzzssszzz

당신이 _/CSS/graph2.css_의 내용을 포함하도록 게시물을 수정할 수 너비 값을 제거, 지정된 높이 값을 시도, 캔버스를 포함하는 적어도 아무것도 또는 수 그것과 관련이 있니? –

캔버스를 컨테이너에 넣고 CSS를 사용하여 너비를 설정하면 그래프의 크기가 조정됩니다.

https://jsfiddle.net/ug5eczp2/1/

HTML :

<section> 
    <canvas id="updating-chart" width="200" height="200"></canvas> 
</section>

CSS :

section { 
    width: 50%; 
}

출처

2017-04-25 03:34:28 Pango

캔버스는 섹션 컨테이너를 맞는 것입니다. 아래 코드. 섹션의 너비를 원하는 값으로 변경하십시오.

<section> 
    <canvas id="updating-chart" ></canvas> 
</section> 

section { 
width: 100%; 
} 
section > canvas { 
top: 0; 
bottom: 0; 
right: 0; 
left: 0; 
}

출처

2017-04-25 03:41:07 blecaf

만

<canvas id="updating-chart" height="200"></canvas>

출처

2017-04-25 03:44:47

chart.js 크기를 변경할 수 없습니다.

답변

관련 문제