如何在Chart.js环形图中添加cutout percentage实现图表瘦身

要让环形图的环体变细，只需针对你的Chart.js版本，在图表配置中设置对应参数即可，具体操作分版本说明：

1. Chart.js v3+ 版本（当前主流版本） #

从v3开始，环形图的空心区域配置移到了options.plugins.doughnut下，支持两种参数格式：

• 百分比字符串（如'70%'）：基于图表容器最小边的比例计算空白区域
• 像素数值（如150）：固定空白区域的像素大小

示例代码 #

在你已有的图表初始化代码中添加/修改该配置：

const ctx = document.getElementById('myDoughnutChart').getContext('2d');
const myDoughnutChart = new Chart(ctx, {
    type: 'doughnut',
    data: {
        // 你已有的数据配置（labels、datasets）
        labels: ['A', 'B', 'C'],
        datasets: [{
            data: [30, 40, 30],
            backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56']
        }]
    },
    options: {
        plugins: {
            doughnut: {
                // 数值越大，中间空白越大，环体越细；默认值为'50%'
                cutout: '70%'
            }
        },
        // 你已有的滑块交互、动态更新等配置
    }
});

2. Chart.js v2 版本（旧版） #

v2版本直接在options根节点下设置cutoutPercentage参数，取值为0-100的数字（百分比）：

const ctx = document.getElementById('myDoughnutChart').getContext('2d');
const myDoughnutChart = new Chart(ctx, {
    type: 'doughnut',
    data: {
        // 你已有的数据配置
    },
    options: {
        // 数值越大，环体越细；默认值为50
        cutoutPercentage: 70,
        // 你已有的其他配置
    }
});

关键提示 #

• 参数数值越大，环形中间的空白区域越大，环体就越细；反之则环体越粗
• 百分比格式适配不同尺寸的图表容器，像素格式适合固定尺寸的场景
• 你已实现的动态更新、滑块交互功能不受该配置影响，设置后图表会自动渲染调整后的样式

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