如何修复HTML/JavaScript中Chart.js极区图(Polar Area)尺寸过大问题

直接修改<canvas>标签的width/height属性、单独调整options.responsive参数不生效的核心原因是：Chart.js的尺寸计算逻辑默认以父容器可用空间为基准，开启响应式模式时会自动覆写canvas的内联宽高属性，且默认开启宽高比锁定，单独修改单个参数无法触发正确的尺寸重算。

操作步骤 #

1. 给canvas添加固定尺寸的父容器 #

不要直接给canvas标签设置宽高，Chart.js会优先读取父容器的计算尺寸作为图表渲染基准，HTML结构参考如下：

<!-- 外层容器宽高直接设置为你预期的图表展示尺寸，例如下方是小尺寸卡片常用的240px*240px -->
<div class="polar-chart-container">
  <canvas id="polarAreaChart"></canvas>
</div>

对应CSS样式（如果行内样式不方便维护可以抽离到样式文件）：

.polar-chart-container {
  width: 240px;
  height: 240px;
  /* 如果父级是flex/grid布局，加这行防止容器被剩余空间拉伸 */
  flex-shrink: 0;
}

2. 修正Chart初始化配置 #

不要把responsive设为false，保持默认true即可，重点关闭宽高比锁定，配置参考如下：

// 初始化前先销毁同节点下的旧实例，避免热更新/重复初始化导致配置不生效
const existingChart = Chart.getChart('polarAreaChart');
if (existingChart) existingChart.destroy();

const ctx = document.getElementById('polarAreaChart').getContext('2d');
new Chart(ctx, {
  type: 'polarArea',
  data: {
    // 替换为你自己的业务数据
    labels: ['类别1', '类别2', '类别3', '类别4'],
    datasets: [{
      data: [12, 19, 8, 15],
      backgroundColor: [
        'rgba(255, 99, 132, 0.7)',
        'rgba(54, 162, 235, 0.7)',
        'rgba(255, 206, 86, 0.7)',
        'rgba(75, 192, 192, 0.7)'
      ]
    }]
  },
  options: {
    responsive: true,
    maintainAspectRatio: false, // 核心配置：关闭默认宽高比锁定，允许按父容器尺寸渲染
    // 小尺寸下可以调整内边距和图例大小，避免内容拥挤
    layout: {
      padding: 6
    },
    plugins: {
      legend: {
        position: 'bottom',
        labels: {
          boxWidth: 12,
          padding: 8
        }
      }
    }
  }
});

常见踩坑排查 #

• 不要直接给canvas标签加style="width: xx; height: xx"的样式：Canvas的CSS展示尺寸和内部渲染像素尺寸是两套逻辑，直接加CSS样式会导致图表拉伸模糊，尺寸计算逻辑异常。
• 如果父容器用了百分比宽高，要确保父容器的上层元素有明确可计算的固定尺寸，否则会一路向上追溯到body节点，导致图表撑满整个页面宽度。
• 如果需要更小的图表展示尺寸，直接修改外层容器的宽高数值即可，图表会自动适配容器尺寸，不需要改动其他配置。

内容的提问来源于stack exchange，提问作者pomoworko.com