如何让Chart.js图表动态适配父元素窗口大小？

要让Chart.js图表完全适配全屏模态框的父元素，且随窗口动态调整，按以下步骤操作：

• 给图表容器设置视口单位样式
  确保模态框内的图表容器占满可用空间，同时避开模态框的控制元素（比如关闭按钮）。示例CSS：

  /* 全屏模态框的图表容器 */
  .fullscreen-chart-container {
    width: 100%;
    height: calc(100vh - 80px); /* 减去模态框头部/底部高度，避免内容溢出 */
    max-height: calc(100vh - 80px);
  }
  /* 确保模态框本身全屏 */
  .fullscreen-modal {
    max-width: 100vw;
    margin: 0;
  }
  .fullscreen-modal .modal-content {
    height: 100vh;
    border-radius: 0;
  }
  

• 配置Chart.js取消固定宽高比
  Chart.js默认会保持图表的宽高比例，要让它完全适配容器尺寸，必须开启响应式并关闭maintainAspectRatio：

  const myChart = new Chart(document.getElementById('targetChart'), {
    type: 'bar', // 替换为你的图表类型
    data: yourChartData,
    options: {
      responsive: true, // 开启响应式
      maintainAspectRatio: false, // 关键：取消固定宽高比，让图表填满容器
      resizeDelay: 0, // 可选：窗口调整时立即重绘，避免延迟
      // 其他自定义配置...
    }
  });
  

• 手动触发图表重绘（针对模态框切换场景）
  模态框从隐藏到显示时，容器尺寸会突变，Chart.js可能无法自动感知，需要在模态框显示完成后强制重绘：

  // 以Bootstrap模态框为例，监听显示完成事件
  document.getElementById('fullscreenModal').addEventListener('shown.bs.modal', () => {
    myChart.resize(); // 强制图表重新计算并适配新尺寸
  });
  
  // 监听窗口 resize 事件，确保窗口调整时图表同步更新
  window.addEventListener('resize', () => {
    myChart.resize();
  });
  

这样设置后，图表会完全适配模态框容器的尺寸，窗口调整时也会动态更新，不会出现垂直滚动的问题。

内容的提问来源于stack exchange，提问作者Jonathan Wood