Chart.js中Canvas宽高无法设置，占满body需滚动查看求助

嘿，我太懂这个坑了！Chart.js 默认会接管 Canvas 的尺寸控制，你直接在标签上写 width="400" height="400" 基本会被它忽略，而且它默认开启了响应式模式，会让图表撑满父容器（也就是你的 body），导致页面出现滚动条。咱们来快速解决这个问题：

问题根源 #

Chart.js 优先根据元素的 CSS 尺寸 来渲染图表，而不是标签上的原生属性。同时默认配置里 responsive: true 和 maintainAspectRatio: true 会让图表自适应父容器的大小，如果父容器（body）没有尺寸限制，它就会直接占满整个视口空间。

两种解决方案 #

方案1：用CSS固定Canvas尺寸

给你的Canvas加个CSS样式，强制指定宽高，记得加 !important 覆盖Chart.js自动生成的内联样式：

#myChart {
  width: 400px !important;
  height: 400px !important;
}

这样不管Chart.js怎么折腾，Canvas都会保持你想要的大小。

方案2：调整Chart.js的初始化配置

如果你想保留响应式特性，但不想让图表无限制扩张，可以修改初始化选项：

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
  type: 'bar', // 替换成你的图表类型
  data: { /* 你的数据内容 */ },
  options: {
    // 关闭响应式，直接使用Canvas的原生宽高
    responsive: false,
    // 或者如果你想保持响应式，但固定宽高比
    // maintainAspectRatio: true,
    // aspectRatio: 1, // 1:1的比例，对应400x400的尺寸
  }
});

如果选了 responsive: false，你可以保留Canvas标签上的 width 和 height 属性，Chart.js会直接用这个尺寸渲染。

完整修改后的代码示例 #

<!doctype html>
<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
  <style>
    #myChart {
      width: 400px !important;
      height: 400px !important;
      margin: 20px auto; /* 可选，让图表居中并留边距 */
    }
  </style>
</head>
<body>
  <canvas id="myChart"></canvas>
</body>
<script>
  var ctx = document.getElementById('myChart').getContext('2d');
  var myChart = new Chart(ctx, {
    type: 'line',
    data: {
      labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
      datasets: [{
        label: 'Monthly Sales',
        data: [150, 220, 180, 300, 250, 280],
        backgroundColor: 'rgba(54, 162, 235, 0.2)',
        borderColor: 'rgba(54, 162, 235, 1)',
        borderWidth: 1
      }]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false // 配合CSS固定尺寸，避免强制调整比例
    }
  });
</script>
</html>

试一下上面的代码，图表应该会乖乖保持400x400的大小，不会再撑满整个页面啦！

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