使用react-chartjs-2的Line组件时，屏幕缩放图表失效求助

你遇到的图表不随屏幕尺寸调整的问题，主要是没开启响应式配置或者容器设置不当，按下面几步改：

• 给Line组件的options加上响应式开关，这是核心：

  const options = {
    responsive: true, // 开启响应式，监听窗口resize事件
    maintainAspectRatio: false, // 可选，关闭默认比例限制，让图表适配容器宽高
    // 你的其他配置项...
  };
  

• 给Line组件套一个带宽高的容器，让图表有自适应的基准：

  <div style={{ width: '100%', height: '250px' }}>
    <Line options={options} data={data} />
  </div>
  

• 如果你非要保留height属性，确保responsive已经设为true，同时可按需调整maintainAspectRatio：

  <Line options={{ ...options, responsive: true }} data={data} height={80} />
  

原理很直接：responsive: true会让Chart.js自动监听窗口尺寸变化并重新渲染图表；maintainAspectRatio: false能解除默认的宽高比例约束，让图表完全贴合容器尺寸；外层容器的宽高设置则是给图表提供自适应的边界。

内容的提问来源于stack exchange，提问作者Jasbir Rana