PHP连接SQL Server取数渲染CanvasJS图表出现空白页问题

问题根因 #

代码存在3处致命逻辑错误，导致数据读取失败、前端无有效数据源渲染：

• 异常捕获完全失效：sqlsrv 为PHP原生过程式扩展，不抛出PDOException，连接、查询出错时catch块不会触发，所有错误被静默吞掉
• 结果集遍历逻辑错误：sqlsrv_query() 执行成功后返回的是语句资源标识符，并非可直接遍历的行数据数组，强转数组遍历无法拿到实际查询结果
• 无执行状态校验：未判断SQL执行状态、结果集是否为空，异常场景无任何输出提示

修复逻辑 #

1. 替换错误的异常捕获，用sqlsrv_errors()获取SQL执行阶段的错误信息
2. 调用sqlsrv_fetch_array()逐行读取结果集，禁止直接遍历query返回的资源对象
3. 读取字段时强制做数值类型校验转换，避免json_encode输出非标准数值格式导致前端JS报错
4. 前端增加空数据判断，避免空数据集触发CanvasJS渲染异常

修正后可运行代码 #

<?php
require 'conn.php';
$dataPoints = [];
try{
    $handle = "select Lolo_Setpoint, Hihi_Setpoint from Alarms";
    $result = sqlsrv_query($conn, $handle);
    
    // 校验SQL执行状态
    if ($result === false) {
        die(print_r(sqlsrv_errors(), true));
    }

    // 逐行读取数值索引结果集
    while ($row = sqlsrv_fetch_array($result, SQLSRV_FETCH_NUMERIC)) {
        // 强制转换数值类型，过滤异常值
        $x = is_numeric($row[0]) ? floatval($row[0]) : 0;
        $y = is_numeric($row[1]) ? floatval($row[1]) : 0;
        $dataPoints[] = ["x" => $x, "y" => $y];
    }

    // 释放结果资源
    sqlsrv_free_stmt($result);
    $conn = null;
}
catch(Exception $e){
    print($e->getMessage());
}
?>
<!DOCTYPE HTML>
<html>
<head>  
<script>
window.onload = function () {
    const rawData = <?php echo json_encode($dataPoints, JSON_NUMERIC_CHECK); ?>;
    // 空数据兜底
    if (!rawData.length) {
        document.getElementById('chartContainer').textContent = '未查询到有效数据';
        return;
    }

    const chart = new CanvasJS.Chart("chartContainer", {
        animationEnabled: true,
        exportEnabled: true,
        theme: "light1",
        title:{
            text: "数据库数据折线图"
        },
        data: [{
            type: "line",
            dataPoints: rawData
        }]
    });
    chart.render();
}
</script>
</head>
<body>
<div id="chartContainer" style="height: 370px; width: 100%;"></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</body>
</html>

后续排查方向 #

如果替换代码后仍无法正常显示，按顺序校验：

• 打开浏览器F12开发者工具，查看Console栏是否有JS报错，确认页面输出的rawData变量是标准二维数组格式
• 确认conn.php中数据库连接配置正确，连接账号拥有Alarms表的查询权限
• 确认表中Lolo_Setpoint、Hihi_Setpoint字段存储的是合法数值，不存在NULL、特殊字符等异常内容

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