Chart.js饼图在浏览器中不显示问题求助（旅行博客项目）

我在做Web编程作业，开发旅行博客网站，用HTML/CSS/JS/PHP+XAMPP环境，负责Analytics模块。目前概览和最受欢迎帖子功能正常，但Rating Ratio区域的Chart.js饼图死活不显示。

这个饼图需要从数据库拉取1-5星的评分数据，生成各星级占比。我已经：

• 正确引入了Chart.js文件
• 排查过浏览器控制台，现有错误和饼图加载无关
• 试了好几种方法都没解决，求帮忙找原因

相关信息 #

数据库表结构 #

CREATE TABLE ratings (
    id INT AUTO_INCREMENT PRIMARY KEY,
    post_id INT NOT NULL,
    user_id INT NOT NULL,
    star_rating TINYINT CHECK (star_rating BETWEEN 1 AND 5),
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    FOREIGN KEY (post_id) REFERENCES posts(id),
    FOREIGN KEY (user_id) REFERENCES users(id)
);

Rating Ratio模块代码 #

HTML

<section class="analytics-section">
    <h2>Rating Ratio</h2>
    <div class="chart-container">
        <canvas id="ratingPieChart"></canvas>
    </div>
</section>

PHP数据获取（嵌入在HTML页面中）

<?php
// 数据库连接（已确保连接正常，其他模块能正常读库）
$dbHost = 'localhost';
$dbUser = 'root';
$dbPass = '';
$dbName = 'travel_blog_db';

$conn = mysqli_connect($dbHost, $dbUser, $dbPass, $dbName);

// 查询各星级数量
$ratingQuery = "SELECT star_rating, COUNT(*) AS rating_count FROM ratings GROUP BY star_rating ORDER BY star_rating";
$ratingResult = mysqli_query($conn, $ratingQuery);

$ratingLabels = [];
$ratingCounts = [];

while ($row = mysqli_fetch_assoc($ratingResult)) {
    $ratingLabels[] = $row['star_rating'] . ' Star';
    $ratingCounts[] = $row['rating_count'];
}

// 转成JSON给JS用
$labelsJson = json_encode($ratingLabels);
$countsJson = json_encode($ratingCounts);
?>

JavaScript初始化饼图

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    const chartCanvas = document.getElementById('ratingPieChart');
    if (!chartCanvas) return;

    const ctx = chartCanvas.getContext('2d');
    const ratingsData = {
        labels: <?php echo $labelsJson; ?>,
        datasets: [{
            label: 'Rating Distribution',
            data: <?php echo $countsJson; ?>,
            backgroundColor: [
                '#ff9f40', '#ff6384', '#4bc0c0', '#36a2eb', '#9966ff'
            ],
            borderColor: '#fff',
            borderWidth: 1
        }]
    };

    new Chart(ctx, {
        type: 'pie',
        data: ratingsData,
        options: {
            responsive: true,
            maintainAspectRatio: false
        }
    });
});
</script>

我已经试过的操作 #

1. 确认数据库有评分数据，PHP查询在phpMyAdmin中能返回正确结果
2. 检查Chart.js引入路径，用CDN和本地文件都试过，控制台输入Chart能返回构造函数，说明加载正常
3. 把JS代码放在</body>之前，也试过用DOMContentLoaded事件，结果一样
4. 手动替换<?php echo $labelsJson; ?>和<?php echo $countsJson; ?>为静态数组，饼图能正常显示，说明问题可能出在PHP数据传递上？但我打印过这两个变量，看起来是有效的JSON

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