Chart.js 4.2.0如何设置画布为屏幕宽80%、高100%？

直接用CSS视口单位结合Chart.js核心配置就能搞定，不用写JS动态设置容器尺寸，步骤如下：

1. 给全局和容器加CSS样式

   • 清除html、body的默认内外边距，确保屏幕高度能被完全利用
   • 用80vw（占视口宽度80%）和100vh（占视口高度100%）直接定义图表容器的尺寸

2. Chart.js配置只需两个关键项

   • responsive: true：让图表随容器尺寸变化自适应
   • maintainAspectRatio: false：关闭默认宽高比限制，让图表完全填充容器，不用手动计算aspectRatio

完整代码示例 #

<!DOCTYPE html>
<html>
<head>
  <style>
    html, body {
      margin: 0;
      padding: 0;
      height: 100%;
    }
    .chart-container {
      width: 80vw;
      height: 100vh;
    }
  </style>
</head>
<body>
  <div class="chart-container">
    <canvas id="myChart"></canvas>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.2.0/dist/chart.umd.js"></script>
  <script>
    const ctx = document.getElementById('myChart').getContext('2d');
    new Chart(ctx, {
      type: 'bar', // 替换成你需要的图表类型
      data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
          label: '# of Votes',
          data: [12, 19, 3, 5, 2, 3],
          backgroundColor: [
            'rgba(255, 99, 132, 0.2)',
            'rgba(54, 162, 235, 0.2)',
            'rgba(255, 206, 86, 0.2)',
            'rgba(75, 192, 192, 0.2)',
            'rgba(153, 102, 255, 0.2)',
            'rgba(255, 159, 64, 0.2)'
          ],
          borderColor: [
            'rgba(255, 99, 132, 1)',
            'rgba(54, 162, 235, 1)',
            'rgba(255, 206, 86, 1)',
            'rgba(75, 192, 192, 1)',
            'rgba(153, 102, 255, 1)',
            'rgba(255, 159, 64, 1)'
          ],
          borderWidth: 1
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        scales: {
          y: {
            beginAtZero: true
          }
        }
      }
    });
  </script>
</body>
</html>

原理说明 #

• vw/vh是视口单位，直接对应屏幕宽高的百分比，无需JS计算屏幕尺寸
• 关闭maintainAspectRatio后，图表会完全继承容器的宽高，不会因默认宽高比导致显示异常，也就不用手动设置aspectRatio
• 清除html/body的内外边距是为了避免页面出现滚动条，确保容器能占满整个屏幕高度

内容的提问来源于stack exchange，提问作者schlebe