如何在HTML/CSS中使用Chart.js实现doughnut环形图？解决图表空白问题

问题现象 #

参照教程在管理面板引入Chart.js环形图时，图表区域始终显示空白，与预期效果不符：

• 预期效果：
  
• 异常状态（右侧图表区域空白）：
  

问题根因 #

核心图表配置无语法错误，空白由两个易遗漏的配置问题导致：

• 图表父容器.chart未设置明确宽高。当Chart.js开启responsive: true响应式配置时，会自动撑满父容器尺寸；如果父容器本身没有定义有效宽高（常见为高度塌陷为0），Canvas会被渲染为0高度，视觉上呈现空白。
• 未做DOM加载状态判断。如果自定义脚本执行时，Canvas节点还未被浏览器解析完成，document.getElementById('doughnut')会返回空值，直接导致图表初始化失败。

现有核心代码 #

HTML结构 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <title>Admin Panel</title>
</head>
<body>
    <div class="chart" id="doughnut-chart">
        <canvas id="doughnut"></canvas>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="chart.js"></script>
</body>
</html>

图表初始化JS（chart.js文件） #

const ctx = document.getElementById('doughnut').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'doughnut',
    data: {
        labels: ['Academic', 'Non-academic', 'Administration', 'Others'],
        datasets: [{
            data: [42, 12, 8, 6],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
            ],
            borderWidth: 1
        }]
    },
    options: {
        responsive: true
    }
});

修复步骤 #

1. 给图表容器添加明确宽高，在style.css中增加如下样式规则，宽高值可根据自己的仪表盘布局调整，只要不出现高度为0的情况即可：

.chart {
    width: 400px;
    height: 400px;
}

2. 修改图表初始化逻辑，确保DOM完全加载后再执行初始化，同时补充配置避免比例拉伸异常，更新chart.js代码如下：

document.addEventListener('DOMContentLoaded', () => {
    const ctx = document.getElementById('doughnut').getContext('2d');
    new Chart(ctx, {
        type: 'doughnut',
        data: {
            labels: ['Academic', 'Non-academic', 'Administration', 'Others'],
            datasets: [{
                data: [42, 12, 8, 6],
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                ],
                borderColor: [
                    'rgba(255, 99, 132, 1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                ],
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false
        }
    });
});

排查提示：如果修改后仍无法显示，打开浏览器开发者工具控制台，检查是否存在本地CSS/JS文件路径错误、CDN资源加载失败的报错，逐一修复即可。

内容的提问来源于stack exchange，提问作者pomoworko.com