PHP+jQuery+Chartist.js实现数据库实时图表：无法显示问题求助

我帮你梳理下代码里的几个核心问题，一步步来修复：

1. PHP端JSON数据结构完全不符合Chartist要求 #

你当前生成的JSON是一堆{"labels": "H:i", "series": 数字}的独立对象，但Chartist需要的是一个统一对象，包含完整的labels数组（所有时间点）和series数组（对应时间的玩家数）。另外还要注意，你需要覆盖每30分钟的所有时间点，哪怕某个时间点没有数据也要填0，不然图表会缺失节点。

修改后的PHP代码：

<?php
// 预先生成24小时内所有30分钟间隔的时间点（从00:00到23:30）
$timePoints = [];
for ($hour = 0; $hour < 24; $hour++) {
    foreach ([0, 30] as $minute) {
        $timePoints[] = sprintf("%02d:%02d", $hour, $minute);
    }
}

// 初始化玩家数数组，默认所有时间点为0
$playerCounts = array_fill(0, count($timePoints), 0);

// 假设$date是今日00:00的unix时间戳，根据你的实际逻辑调整
$date = strtotime("today");
// 使用预编译SQL防止注入风险
$stmt = $link->prepare("SELECT time, players FROM online WHERE time >= ?");
$stmt->execute([$date]);

// 把数据库查询到的玩家数匹配到对应时间点
while($row = $stmt->fetch(PDO::FETCH_ASSOC)){
    $formattedTime = date("H:i", $row['time']);
    $index = array_search($formattedTime, $timePoints);
    if ($index !== false) {
        $playerCounts[$index] = (int)$row['players'];
    }
}

// 生成Chartist直接可用的JSON结构
$response = [
    'labels' => $timePoints,
    'series' => [$playerCounts] // series是数组的数组，支持多条数据线
];

echo json_encode($response);
?>

2. jQuery端的解析与数据处理错误 #

你现在做了重复的JSON解析，而且没有正确读取返回的数据。修改后的jQuery代码：

// 用异步请求的回调，不要用async:false阻塞页面
$.ajax({
    url: "settings.php",
    dataType: "json",
    success: function(data) {
        var optionsPlayersOnline = {
            lineSmooth: Chartist.Interpolation.cardinal({ tension: 0 }),
            low: 0,
            high: 50,
            chartPadding: { top: 0, right: 0, bottom: 0, left: 0 },
            // 可选：添加x轴标签处理，避免时间标签重叠
            axisX: {
                labelInterpolationFnc: function(value, index) {
                    return index % 4 === 0 ? value : null; // 每4个点显示一个标签
                }
            }
        };
        // 直接用返回的data初始化图表
        new Chartist.Line('.ct-chart', data, optionsPlayersOnline);
    },
    error: function(xhr, status, error) {
        console.log("请求出错啦:", error); // 方便调试
    }
});

3. 最后要检查的几个点 #

• 确保页面上存在.ct-chart元素，并且给它设置了足够的宽高（比如width: 100%; height: 400px;），Chartist需要容器有尺寸才能渲染
• 打开浏览器控制台（F12）看看有没有报错，比如404找不到settings.php，或者JSON格式错误
• 直接访问settings.php，确认返回的JSON格式是这样的：

  {"labels":["00:00","00:30",..."23:30"],"series":[[0,5,3,...12]]}
  

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