Chart.js饼图76x76px宽高设置未生效，图表未填满canvas

我之前也碰到过Chart.js饼图不能完全填充指定尺寸canvas的情况，其实这大概率是默认配置里的布局边距、图例占位或者比例设置在搞鬼，给你几个针对性的解决办法：

核心原因 #

Chart.js默认会给图表添加默认内边距，同时如果开启了图例（默认是开启的），哪怕你没看到明显的图例元素，它也会预留出一定的空间，导致饼图无法填满整个canvas。

具体解决方案 #

1. 清除布局内边距 #

在图表配置的options里，把layout.padding设置为0，移除默认的内边距：

const ctx = document.getElementById('myChart').getContext('2d');
new Chart(ctx, {
    type: 'pie',
    data: {
        // 你的数据配置
        labels: ['A', 'B', 'C'],
        datasets: [{
            data: [30, 40, 30],
            backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56']
        }]
    },
    options: {
        layout: {
            padding: 0 // 关键：清除所有默认内边距
        },
        // 其他配置...
    }
});

2. 关闭不必要的图例（如果不需要的话） #

默认图例虽然可能不明显，但会占用顶部/侧边的空间，直接关闭它：

options: {
    plugins: {
        legend: {
            display: false // 关闭图例，释放空间
        }
    },
    layout: {
        padding: 0
    }
}

3. 强制设置宽高比例为1 #

饼图默认的aspectRatio是1，但有时候可能会被其他配置影响，明确设置它保证正方形比例：

options: {
    aspectRatio: 1, // 确保图表是正方形，和你的canvas尺寸匹配
    plugins: {
        legend: { display: false }
    },
    layout: { padding: 0 }
}

4. 避免Canvas的尺寸冲突 #

确保你没有同时用HTML属性（width="76" height="76"）和CSS来设置canvas的宽高，这会导致缩放失真。如果用了HTML属性设置尺寸，就不要在CSS里再设置width/height，或者保持两者数值一致。

完整示例代码 #

<div class="wrapper">
    <canvas id="myChart" width="76" height="76"></canvas>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const ctx = document.getElementById('myChart').getContext('2d');
new Chart(ctx, {
    type: 'pie',
    data: {
        labels: ['Red', 'Blue', 'Yellow'],
        datasets: [{
            data: [50, 30, 20],
            backgroundColor: ['#ff0000', '#0000ff', '#ffff00']
        }]
    },
    options: {
        aspectRatio: 1,
        layout: {
            padding: 0
        },
        plugins: {
            legend: {
                display: false
            },
            tooltip: {
                enabled: false // 如果不需要 tooltip 也可以关闭，进一步避免空间占用
            }
        }
    }
});
</script>

按照这些配置调整后，饼图应该就能完全填满76x76px的canvas了，你可以试试看～

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