绘制柱状图时数据无法显示的问题求助

核心问题定位 #

你的代码存在几个关键错误，并非Chart.js版本问题：

• 前端未正确解析PHP返回的JSON数据
• 图表配置中labels参数使用错误
• PHP未设置正确的响应头，可能导致JSON解析失败
• 未确保页面引入jQuery依赖（代码中未体现）

分步修复代码 #

1. 前端脚本修正 #

<!-- 先引入jQuery（必须，否则$.post无法生效） -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
<script>
$(document).ready(function () {
    showGraph();
});

function showGraph() {
    $.post("sqlChart.php", function (data) {
        console.log(data);
        var day = [];
        var calories = [];

        // 遍历数据并转换数值类型
        for (var i in data) {
            day.push(data[i].day);
            calories.push(parseInt(data[i].calories));
        }

        // 修正labels为日期数组，对应X轴显示
        var chartdata = {
            labels: day,
            datasets: [
                {
                    label: 'Calories',
                    backgroundColor: '#49e2ff',
                    borderColor: '#46d5f1',
                    hoverBackgroundColor: '#CCCCCC',
                    hoverBorderColor: '#666666',
                    data: calories
                }
            ]
        };

        // 确保绑定的是canvas元素
        var graphTarget = $("#container");
        if(graphTarget.is('canvas')){
            new Chart(graphTarget, {
                type: 'bar',
                data: chartdata
            });
        } else {
            console.error("#container 不是canvas元素，请检查页面结构");
        }
    }, 'json'); // 指定返回数据类型为JSON，自动解析
}
</script>

2. PHP代码修正 #

<?php
require_once '../db.conf';
$mysqli = new mysqli($dbhost, $dbuser, $dbpass, $dbname, $dbport);

// 输出JSON格式的错误信息
if ($mysqli->connect_error) {
    header('Content-Type: application/json');
    echo json_encode(['error' => '数据库连接失败: ' . $mysqli->connect_errno . ' ' . $mysqli->connect_error]);
    exit;
}

$query = "SELECT day, calories FROM calorie";
$result = $mysqli->query($query);
$data = array();

// 使用fetch_assoc稳妥获取数据
while($row = $result->fetch_assoc()) {
    $data[] = $row;
}

$result->free();
$mysqli->close();

// 设置正确的JSON响应头
header('Content-Type: application/json');
echo json_encode($data);
?>

额外检查项 #

• 确认页面中存在 <canvas id="container"></canvas> 元素，Chart.js必须绑定到canvas标签
• 打开浏览器控制台（F12），查看Network标签，确认sqlChart.php返回的是格式正确的JSON数据
• 检查数据库calorie表是否存在有效数据，day和calories字段是否正确

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