如何在Chart.js中结合RWD动态修改aspectRatio参数？

实现方案 #

直接通过JavaScript监听窗口尺寸变化，动态修改图表的aspectRatio配置并更新图表，完全不需要额外CSS。

步骤1：初始化图表 #

先创建图表实例，设置初始的aspectRatio（默认适配≥576px的屏幕）：

const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'bar', // 替换为你的图表类型
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        aspectRatio: 1, // 初始适配≥576px的屏幕
        scales: {
            y: { beginAtZero: true }
        }
    }
});

步骤2：编写动态更新函数 #

根据当前窗口宽度计算对应的aspectRatio，仅当比例变化时才更新图表，避免冗余重绘：

function updateChartAspectRatio() {
    const viewportWidth = window.innerWidth;
    let targetRatio = 1;
    
    if (viewportWidth >= 1280) {
        targetRatio = 2;
    }

    if (myChart.options.aspectRatio !== targetRatio) {
        myChart.options.aspectRatio = targetRatio;
        myChart.update();
    }
}

步骤3：绑定监听事件 #

初始化时执行一次函数确保适配当前屏幕，同时监听窗口resize事件：

// 初始化立即适配当前屏幕
updateChartAspectRatio();
// 监听窗口尺寸变化
window.addEventListener('resize', updateChartAspectRatio);

性能优化：添加防抖处理 #

如果担心resize事件触发过于频繁导致性能损耗，给更新函数加上防抖：

function debounce(func, delay = 150) {
    let timeout;
    return () => {
        clearTimeout(timeout);
        timeout = setTimeout(func, delay);
    };
}

// 用防抖后的函数监听resize
window.addEventListener('resize', debounce(updateChartAspectRatio));

这个方案完全符合需求：仅修改aspectRatio参数，不依赖额外CSS，同时通过防抖和比例变化判断确保性能最优。

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