如何缩小动态加载的ChartJS极地区域图表尺寸

问题原因 #

• 当responsive: true时，Chart.js会优先根据canvas的父容器尺寸渲染图表，直接设置canvas的style.width/height会被覆盖，导致自定义尺寸不生效。
• 极地区域图（Polar Area）默认是正方形比例，开启maintainAspectRatio: false后，若未给父容器指定明确宽高，canvas会因失去比例约束被压缩到高度为0，图表直接消失。

解决方案 #

给每个动态创建的canvas添加固定尺寸的父容器，通过控制父容器尺寸限制图表大小，同时保留maintainAspectRatio: true（默认值，无需额外配置）维持极地区域图的正方形比例。

修改后的完整代码：

HTML部分

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<div id="chart-containerpolar"></div>

JavaScript部分

const chartData = [
    [10, 20, 30],
    [20, 30, 40],
    [30, 40, 50]
];

// 遍历数据创建图表
for (let i = 0; i < chartData.length; i++) {
    // 创建包裹容器，设置固定尺寸
    const chartWrapper = document.createElement('div');
    chartWrapper.style.width = '100px';
    chartWrapper.style.height = '100px';
    chartWrapper.style.display = 'inline-block'; // 可选：让图表横向排列，避免换行

    // 创建canvas元素
    const canvas = document.createElement('canvas');
    canvas.id = `chart-${i}`;
    chartWrapper.appendChild(canvas);

    // 将容器添加到页面
    const chartContainer = document.getElementById('chart-containerpolar');
    chartContainer.appendChild(chartWrapper);

    // 创建图表实例
    const chart = new Chart(canvas, {
        type: 'polarArea',
        data: {
            datasets: [{
                data: chartData[i],
                backgroundColor: [
                    "rgb(68, 114, 197)",
                    "rgb(255, 191, 0)",
                    "rgb(104, 163, 68)"
                ],
            }],
            labels: ['Part1', 'Part2', 'Part3']
        },
        options: {
            responsive: true,
            scale: {
                ticks: {
                    beginAtZero: true
                }
            }
        }
    });
}

额外说明 #

• 如果需要非正方形的极地区域图，可设置options.aspectRatio为自定义比例（比如0.8表示宽高比0.8），同时调整父容器的宽高来匹配该比例。
• 不要直接修改canvas的style尺寸，Chart.js在响应式模式下会自动根据父容器调整canvas的实际绘制尺寸（内部width/height属性），style仅控制显示大小。

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