Chart.js饼图无法正确居中问题求助

要让饼图在Canvas内从(x-200, y-200)位置开始居中渲染，可以通过以下两种方式配置Chart.js选项：

方法一：利用layout.padding调整偏移 #

通过设置内边距，让饼图在偏移后的剩余空间内自动居中，适合简单场景：

options: any = {
    cutout: '94%',
    responsive: true,
    maintainAspectRatio: false, // 允许自定义Canvas尺寸比例
    layout: {
        padding: {
            left: 200,
            top: 200,
            right: 200,
            bottom: 200
        }
    }
};

设置左右上下各200的内边距后，饼图会在Canvas扣除这些内边距后的区域里自动居中，实现从(x-200, y-200)开始的居中效果。

方法二：自定义图表区域（更灵活） #

通过插件钩子直接修改图表绘制区域的坐标，精准控制位置：

options: any = {
    cutout: '94%',
    responsive: false, // 关闭响应式以固定Canvas尺寸
    plugins: {
        beforeLayout: (chart) => {
            const { canvas } = chart;
            // 手动设置图表绘制区域的起始坐标和尺寸
            chart.chartArea = {
                left: 200,
                top: 200,
                width: canvas.width - 400, // 扣除左右各200
                height: canvas.height - 400 // 扣除上下各200
            };
        }
    }
};

这种方式可以完全自定义饼图的绘制范围，确保在目标区域内居中。

注意事项 #

• 若开启responsive，需为Canvas容器设置固定宽高，同时将maintainAspectRatio设为false，避免自动调整比例影响位置。
• cutout: '94%'会生成环形图，调整位置时需确保环形在目标区域内完整显示。

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