如何在Chart.js中限制图表最大尺寸同时保持响应式？

核心思路是用CSS媒体查询控制图表容器的尺寸，Chart.js的响应式特性会自动适配容器大小，不需要在Chart.js配置里做特殊修改（官网没找到相关设置是因为这属于前端布局范畴，而非Chart.js本身的功能）。

具体实现步骤： #

1. 给图表容器添加自定义类，用于CSS控制
2. 通过媒体查询分别定义移动端和桌面端的容器尺寸
3. 确保Chart.js配置开启响应式

HTML 结构

<div class="chart-container">
  <canvas id="doughnutChart"></canvas>
</div>

CSS 样式（核心）

/* 默认适配移动端：全屏宽度 */
.chart-container {
  width: 100%;
  padding: 1rem; /* 可选：加内边距避免贴边 */
}

/* 桌面端断点（可根据需求调整阈值，比如1024px） */
@media (min-width: 768px) {
  .chart-container {
    width: 50%; /* 占屏幕宽度的一半 */
    margin: 0 auto; /* 可选：让图表居中显示 */
    max-width: 900px; /* 可选：限制最大宽度，避免大屏下图表过大 */
  }
}

Chart.js 配置

const ctx = document.getElementById('doughnutChart').getContext('2d');
new Chart(ctx, {
  type: 'doughnut',
  data: {
    labels: ['项目1', '项目2', '项目3'],
    datasets: [{
      data: [40, 35, 25],
      backgroundColor: ['#2ecc71', '#3498db', '#e74c3c']
    }]
  },
  options: {
    responsive: true, // 必须开启，让图表跟随容器尺寸变化
    maintainAspectRatio: true, // 保持环形图的宽高比，若要自定义比例可设为false并给容器加固定height
    // 其他自定义配置（比如图例、 tooltip 等）
  }
});

额外说明 #

• 断点宽度（768px）可根据你的产品适配需求调整，比如用1024px作为桌面端的判定标准
• 如果不需要环形图保持固定比例，可将maintainAspectRatio设为false，然后给容器添加固定height或min-height
• 不要直接给<canvas>标签设置width/height属性，否则会破坏响应式适配

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