Chart.js 3.6.0图表响应式适配问题：固定80px高度宽度溢出容器

一、响应式溢出问题修复 #

问题根因 #

• responsive是Chart.js的顶层配置项，你错误将其放在plugins层级下，响应式规则未生效
• 未关闭宽高比锁定，无法固定高度为80px
• 图表父容器未限制宽度，窗口缩小时无法约束canvas尺寸
• 仅初始化时计算了一次标签展示数量，窗口缩放时无动态更新逻辑

修复代码 #

1. CSS修改

.container {
    border-radius: 6px;
    background-color: rgb(47,59,82);
    width: 80%;
    display: inline-flex;
    margin: 32px 12px 32px 12px;
    flex-direction: column;
    flex-wrap: wrap;
}

.chart-canvas {
    padding: 32px;
    /* 新增以下两行 */
    width: 100%;
    box-sizing: border-box;
}
/* 新增canvas样式 */
#memberCount {
    display: block;
    width: 100% !important;
    height: 80px !important;
}

2. HTML修改

删掉canvas的内联width、height属性：

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

3. JS配置修改

调整配置项层级，新增宽高比锁定关闭配置：

const myChart = new Chart(ctx, {
    options: {
        // 新增顶层响应式配置
        responsive: true,
        maintainAspectRatio: false, // 关闭宽高比锁定，支持固定高度
        scales: {
            // 原有scales配置保持不变
        },
        plugins: {
            // 原有plugins配置保持不变，删除之前写在plugins里的responsive配置
        }
    }
})

4. 新增窗口缩放监听

在JS末尾添加窗口缩放时的动态更新逻辑：

window.addEventListener('resize', () => {
    const newWindowSize = window.innerWidth <= 1080 ? 4 : dateLabels.length - 1
    if (newWindowSize !== windowSizeChart) {
        windowSizeChart = newWindowSize
        myChart.options.scales.x.labels = dateLabels.slice(0, windowSizeChart)
        myChart.update()
    }
})

二、MySQL日/周/月数据展示方案 #

后端实现 #

开发通用统计接口，接受time_granularity参数（可选值day/week/month），按对应粒度聚合数据：

• 日度：按DATE(统计时间字段)分组，返回格式为YYYY-MM-DD的标签和对应统计值
• 周度：按YEARWEEK(统计时间字段, 1)分组（第二个参数1表示周一为周起始单位，可按需调整），返回格式为第X周或YYYY年第X周的标签和对应统计值
• 月度：按DATE_FORMAT(统计时间字段, '%Y-%m')分组，返回格式为YYYY-MM的标签和对应统计值

前端实现 #

• 在图表上方新增日/周/月切换按钮组，点击按钮时携带对应粒度参数请求后端接口
• 接口返回数据后，直接更新图表的labels和两个dataset的data字段，调用myChart.update()刷新图表即可
• 可新增本地缓存逻辑，已经请求过的粒度数据无需重复调用接口，提升加载速度

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