Chart.js 图表无法通过 CSS width/height 缩放？根本原因在于 canvas 元素的响应式机制依赖容器尺寸与 maintainAspectRatio 配合，正确做法是使用 max-width/max-height + responsive: true + maintainAspectRatio: false 三者协同控制。
chart.js 图表无法通过 css width/height 缩放？根本原因在于 canvas 元素的响应式机制依赖容器尺寸与 `maintainaspectratio` 配合，正确做法是使用 `max-width`/`max-height` + `responsive: true` + `maintainaspectratio: false` 三者协同控制。
在 Chart.js 中，直接对 <canvas> 元素设置 width 和 height 样式（如 width: 50px; height: 50px;）不会生效——这是因为 Chart.js 在初始化时会主动读取 canvas 的 offsetWidth/offsetHeight 并重写其原生 width/height 属性（以像素为单位），而 CSS 的 width/height 仅影响渲染尺寸（即“拉伸”效果），不改变 canvas 的绘图缓冲区分辨率，最终导致图表模糊、错位或完全不响应。
✅ 正确缩放方案需三步协同：
-
CSS 层：使用 max-width / max-height 约束容器尺寸
为 canvas 的父容器（或 canvas 自身）设置 max-width 和 max-height，并确保其可被父级正常继承尺寸：
#chart {
background: black;
padding: 20px;
border-radius: 30px;
margin-bottom: 50px;
max-width: 600px; /* ✅ 推荐：设为最大允许宽度 */
max-height: 400px; /* ✅ 推荐：设为最大允许高度 */
/* ❌ 移除 width / height */
}-
JavaScript 层：启用响应式并禁用宽高比锁定
在 Chart 配置中必须同时启用 responsive: true 和 maintainAspectRatio: false：
const config = {
responsive: true, // ✅ 启用响应式监听容器尺寸变化
maintainAspectRatio: false, // ✅ 关键！否则图表将强制保持默认 2:1 比例
type: 'line',
data,
options: {
scales: {
y: { beginAtZero: true },
x1: { labels: ['White', 'Black', 'Hispanic', 'Asian', 'Unknown'] },
x2: { position: 'top', labels: ['<18', '18-30', '31-45', '>45', 'Unknown'] }
}
}
};-
HTML 层：确保 canvas 有明确的包裹容器（推荐）
虽然可直接作用于 <canvas>，但更健壮的做法是用 <div> 包裹，并对 div 设置尺寸约束：
<div class="chart-container" style="max-width: 600px; max-height: 400px;"> <canvas id="chart"></canvas> </div>
.chart-container {
margin: 0 auto;
}
#chart {
width: 100% !important; /* 强制填充容器 */
height: 100% !important;
}⚠️ 注意事项：
- 不要混用 width/height 样式与 max-width/max-height，前者会干扰响应式逻辑；
- 若图表仍不缩放，请检查是否遗漏 maintainAspectRatio: false —— 这是绝大多数“尺寸失效”问题的根源；
- Chart.js v3+ 默认启用 responsive: true，但 maintainAspectRatio 默认为 true，务必显式设为 false；
- 如需精确像素尺寸（如固定 300×200），可在 canvas 上直接设置原生属性（非 CSS）：
const ctx = document.getElementById('chart').getContext('2d'); ctx.canvas.width = 300; ctx.canvas.height = 200;但此时需关闭 responsive: false，否则会被覆盖。
✅ 最终验证：调整浏览器窗口或父容器尺寸，图表将平滑重绘，且文字、线条、坐标轴均保持清晰比例。该方案兼容双 X 轴、多 Y 轴等复杂配置，是 Chart.js 官方推荐的响应式实践。
