Chart.js 极坐标图动态加载时的尺寸优化实践

本文详解如何在动态创建 chart.js 极坐标图（polararea）时精准控制画布尺寸，解决 `width`/`height` 样式无效、图表消失等常见问题，核心在于正确配置容器尺寸与响应式选项。

Chart.js 的极坐标图（polarArea）默认采用响应式渲染机制：其实际绘制尺寸并非由 元素自身的 width/height 内联样式直接决定，而是基于父容器的尺寸进行缩放计算。这也是为什么你在 canvas.style.width = ‘100px’ 后图表仍显示为默认大小——Canvas 的 CSS 样式仅影响显示缩放（类似 transform: scale()），而非渲染分辨率；而 maintainAspectRatio: false 单独启用却导致图表消失，正是因为 responsive: true 与容器无明确尺寸时，Chart.js 无法确定基准宽高，进而放弃渲染。

✅ 正确解法是 “双管齐下”：

1. 为父容器设置明确的 CSS 尺寸（推荐使用 px 或 rem 等固定单位）；
2. 保留 responsive: true 并移除对 Canvas 自身尺寸的错误干预（如 canvas.style.width/height 可完全删除）；
3. 若需严格匹配特定像素尺寸（如 100×100），可额外启用 maintainAspectRatio: false，但前提是父容器尺寸已精确设定。

以下是优化后的完整实现：

const chartData = [   [10, 20, 30],   [20, 30, 40],   [30, 40, 50] ];  for (let i = 0; i < chartData.length; i++) {   // ✅ 移除 canvas.style.width/height —— 不再需要   const canvas = document.createElement('canvas');   canvas.id = `chart-${i}`;    const chartContainer = document.getElementById('chart-containerpolar');   chartContainer.appendChild(canvas);    new Chart(canvas, {     type: 'polarArea',     data: {       labels: ['Part1', 'Part2', 'Part3'],       datasets: [{         data: chartData[i],         backgroundColor: [           "rgb(68, 114, 197)",           "rgb(255, 191, 0)",           "rgb(104, 163, 68)"         ]       }]     },     options: {       responsive: true,           // 必须保持为 true       maintainAspectRatio: false, // ✅ 配合固定容器尺寸，确保精确填充       plugins: {         legend: { display: false } // 可选：精简视觉，进一步减小占用       },       scale: {         ticks: { beginAtZero: true }       }     }   }); }

? 关键注意事项：

• ❌ 避免在 上设置 style.width/style.height，这会触发浏览器缩放，导致模糊或布局错位；
• ✅ 容器尺寸必须通过 div 等父元素的 CSS 显式声明（inline-style 或 class 均可），不能依赖 flex/grid 自适应未约束空间；
• ⚠️ 若需多个极坐标图并排，建议为每个图表分配独立容器（如
  ），并统一设置尺寸，避免相互干扰；

• ? 进阶优化：可通过 devicePixelRatio 手动调整 canvas.width/canvas.height 属性提升高清屏渲染质量（需配合 scale 重绘），但对基础尺寸控制非必需。

通过以上配置，Chart.js 将严格按容器尺寸渲染极坐标图，实现真正可控的紧凑布局，兼顾性能与视觉一致性。