Chart.js图表无法随容器宽度变化自适应调整问题咨询

问题根源总结 #

三个问题都是由Chart.js响应式配置错误、CSS约束不合理、侧边栏交互未触发图表重绘三个原因导致的，可按以下步骤逐一修复：

1. 调整CSS规则（解决高度适配、拉伸模糊问题） #

你当前直接给canvas设置了固定最小高度，且没有约束canvas父容器的布局，会导致Chart.js自动计算尺寸异常，修改后的CSS如下：

.graph1 {
    position: relative;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-gap: 1rem;
    height: 26rem;
    margin-bottom: 1.5rem;

    & > div {
        padding: 1rem;
        box-shadow: 0px 3px 6px #00000029;
        border-radius: 0.6rem;
        /* 新增：让子元素垂直排列，canvas占满剩余高度 */
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    canvas {
        width: 100% !important;
        /* 去掉原有的min-height，让canvas自适应父容器剩余高度 */
        height: 100% !important;
        flex: 1;
    }
}

注意：不要直接给canvas设置固定宽高，由父容器尺寸控制图表大小，避免位图拉伸模糊。

2. 修改Chart.js配置 #

默认maintainAspectRatio: true会强制图表保持固定宽高比，无法适配容器的自定义尺寸，调整配置如下：

options: {
    responsive: true,
    // 关闭宽高比锁定，允许图表填满父容器
    maintainAspectRatio: false,
    // 其他配置保持不变
}

三个图表都需要同步修改这个配置项。

3. 侧边栏切换时手动触发图表重绘（解决宽度不收缩问题） #

Chart.js默认仅监听窗口resize事件，侧边栏收起/展开属于自定义交互，不会触发默认的重绘逻辑，你需要在侧边栏切换按钮的点击事件回调中，手动调用所有图表实例的resize()方法：

// 你的侧边栏切换逻辑
document.querySelector('.sidebar-toggle').addEventListener('click', function() {
    // 原有侧边栏展开/收起代码
    // ...

    // 新增：触发所有图表重绘调整尺寸
    myChart.resize();
    // 另外两个图表实例也同步调用resize
    myChart2.resize();
    myChart3.resize();
})

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