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

时间:2018-04-25 18:14:56

标签: chart.js

我无法在画布上设置宽度和高度,它可以在身体上获得完整的高度和宽度。

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



<!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>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

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

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