无法在图表js中的画布上设置宽度和高度答案

【问题标题】：Unable to set width and height on canvas in chart js无法在图表js中的画布上设置宽度和高度
【发布时间】：2018-04-25 18:14:56
【问题描述】：

我无法在画布上设置宽度和高度，它占用了身体上可用的全部高度和宽度。

你能帮忙吗？我需要向下滚动才能看到图表。

<!doctype html>
<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
    <style>
	  
	</style>
  </head>
  <body>
    <canvas id="myChart" width="400" height="400"></canvas>
  </body>
  <script>
  var ctx = document.getElementById('myChart').getContext('2d');
  data = {
    datasets: [{
        data: [10, 20, 30,50],
		backgroundColor: ['#ff6384','#36a2eb','#cc65fe', '#ffce56'],
		borderWidth: ['1','1','1', '1']	
    }],

    labels: ['Red','Yellow','Blue','Green']
	
};
var myDoughnutChart = new Chart(ctx, {
    type: 'doughnut',
    data: data,
	options: {
    legend: {
        display: false,
		 responsive: false
      }
    
    }
});
  </script>
</html>

【问题讨论】：

标签： chart.js

【解决方案1】：

您必须将它放在容器 div 元素中并设置容器的宽度和高度，就像在 docs 中提到的那样。

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

【讨论】：