Chart图表页面尺寸自适应功能失效问题求助

你的图表无法跟随网页宽高调整自适应，问题出在缺少CSS层面的尺寸约束——虽然已经在Chart配置里开启了responsive: true，但canvas元素及其父容器没有设置响应式样式，导致图表无法感知窗口尺寸变化并调整。

修复步骤 #

1. 给图表容器添加响应式宽度样式，确保它能随窗口缩放
2. 强制canvas元素继承容器尺寸，避免固定尺寸限制
3. 可选：通过maintainAspectRatio配置控制图表是否保持宽高比

修改后的完整代码 #

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .chart-container {
            width: 100%;
            max-width: 900px; /* 可选：限制图表最大宽度，避免在大屏上过度拉伸 */
            margin: 20px auto; /* 可选：让图表居中显示 */
        }

        #myChart {
            width: 100% !important;
            height: auto !important;
        }
    </style>
    <title>Chart</title>
</head>

<body>
    <div class="chart-container">
        <canvas id="myChart"></canvas>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script>
    <script>
        const ctx = document.getElementById('myChart');     
        const data = [10, 12, 14, 20, 16, 11];
           
        Chart.register(ChartDataLabels);
        new Chart(ctx, {
            type: 'bar',
            data: {
                labels: ['2020', '2021', '2022', '2023', '2024', '2025'],
                datasets: [{
                    label: `testtesttest`,
                    data: data,
                    borderWidth: 0,
                    backgroundColor: 'blue',
                    borderColor: 'blue'
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: true, /* 默认true，保持宽高比；设为false可自定义高度 */
                plugins: {
                    title: {
                        display: true,
                        text: 'testtesttest',
                        color: 'black',
                        font: {
                            weight: 'bold',
                            size: 13
                        }
                    },
                    datalabels: {
                        anchor: 'end',
                        align: 'end',
                        color: 'black',
                        font: {
                            weight: '',
                        },
                        formatter: function (value, context) {
                            return value;
                        }
                    }
                }
            }
        });
    </script>
</body>

</html>

关键说明 #

• .chart-container的width: 100%让容器随父元素（页面）宽度变化，max-width避免图表在超大屏幕上变形
• 给canvas添加!important是为了覆盖Chart.js自动生成的内联尺寸样式，确保响应式生效
• 如果需要图表高度也随窗口调整，可将maintainAspectRatio设为false，然后给.chart-container添加固定高度或百分比高度（如height: 50vh）

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