在 Google Charts 仪表盘中优雅地处理无数据情况-php教程-PHP中文网

在 google charts 仪表盘中优雅地处理无数据情况

本教程旨在解决 Google Charts 仪表盘（Gauge）在数据库无数据时无法正常显示的问题。文章将介绍一种客户端 JavaScript 解决方案，通过在数据为空时动态插入一个默认值，确保图表始终能够平稳渲染，避免错误，并在真实数据可用时自动覆盖该默认值，从而提供更健壮的用户体验。

引言

在使用 Google Charts 绘制数据可视化图表时，一个常见挑战是当后端数据库没有返回任何数据时，如何确保图表仍能正常显示，而不是出现空白区域或报错。特别是对于仪表盘（Gauge）这类需要至少一个数值来渲染的图表，处理无数据情况显得尤为重要。本文将详细介绍一种在客户端（JavaScript）层面优雅地处理 Google Charts 仪表盘无数据状态的方法。

后端数据准备：postData.php

首先，我们需要一个后端脚本来从数据库中获取数据，并将其格式化为 Google Charts 所需的 JSON 格式。以下是一个示例 PHP 脚本 postData.php，它连接到数据库，查询最新的传感器数据，并将其编码为 JSON。

<?php
// 假设 conn.php 包含数据库连接逻辑
require 'conn.php';

// 查询最新的一条传感器数据
$sql = "SELECT * FROM sensors ORDER BY id DESC LIMIT 1";
$result = $conn->query($sql) or die ($conn->error);

// 初始化数据数组，包含列定义
$data = [];
$data[] = [["label"=>"Label","type"=>"string"],["label"=>"Value","type"=>"number"]];

// 遍历查询结果，将数据添加到数组中
// 如果数据库中没有数据，此循环将不会执行，导致 $data 仅包含列定义
while ($row = $result->fetch_assoc()) {
   $data[] = ["Temp", (float) $row["temp"]];   
}

// 将数据数组编码为 JSON 格式并输出
echo json_encode($data, JSON_NUMERIC_CHECK);

// 释放结果集并关闭数据库连接
$result->free();
$conn->close();
?>

登录后复制

说明：

$data[] = [["label"=>"Label","type"=>"string"],["label"=>"Value","type"=>"number"]]; 这一行是至关重要的，它定义了图表的列结构。即使数据库没有返回任何行，这个列定义也会被发送到前端。
while ($row = $result->fetch_assoc()) { ... } 循环负责将实际数据行添加到 $data 数组。如果 SELECT 查询没有返回任何结果，此循环将不会执行，这意味着 $data 数组最终将只包含列定义，而没有任何实际的数据行。

前端图表渲染：index.php (初始版本)

接下来，我们来看前端 index.php 中的 JavaScript 代码，它负责加载 Google Charts 库，配置图表选项，并通过 AJAX 请求获取数据并渲染图表。

<!DOCTYPE html>
<html>
<head>
    <title>Google Charts Gauge Demo</title>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <div id="chart_div" style="width: 400px; height: 120px;"></div>

    <script>
        google.charts.load('current', {
            packages: ['gauge']
        }).then(function () {
            var options = {
                width: 400, height: 400, // 仪表盘的尺寸
                redFrom: 90, redTo: 100, // 红色区域范围
                yellowFrom:75, yellowTo: 90, // 黄色区域范围
                minorTicks: 5 // 小刻度数量
            };

            // 创建仪表盘图表实例
            var chart = new google.visualization.Gauge(document.getElementById('chart_div'));

            // 首次绘制图表
            drawChart();

            function drawChart() {
                $.ajax({
                    url: 'postData.php', // 请求后端数据
                    dataType: 'json'
                }).done(function (jsonData) {
                    // 将 JSON 数据转换为 Google Charts 的 DataTable 格式
                    var data = google.visualization.arrayToDataTable(jsonData);

                    // 绘制图表
                    chart.draw(data, options);

                    // 每隔 5 秒刷新图表
                    window.setTimeout(drawChart, 5000);
                });
            }
        });
    </script>
</body>
</html>

登录后复制

问题分析： 在上述初始版本的 drawChart 函数中，如果 postData.php 返回的 jsonData 仅包含列定义（即数据库中没有数据），那么 google.visualization.arrayToDataTable(jsonData) 将创建一个没有数据行的 DataTable 对象。当尝试使用一个空的 DataTable 来绘制仪表盘时，Google Charts 可能无法正确渲染图表，或者显示一个空白区域，这不符合我们期望的用户体验。

解决方案：客户端默认值插入

为了解决上述问题，我们可以在客户端 JavaScript 中，在将数据传递给 chart.draw() 之前，检查 DataTable 是否包含任何数据行。如果发现没有数据行，我们就手动插入一个默认的虚拟数据行。这样，即使后端没有返回实际数据，仪表盘也能显示一个默认值（例如 0），从而确保图表始终可见且功能正常。

以下是修改后的 drawChart 函数：

function drawChart() {
    $.ajax({
        url: 'postData.php',
        dataType: 'json'
    }).done(function (jsonData) {
        // 将 JSON 数据转换为 Google Charts 的 DataTable 格式
        var data = google.visualization.arrayToDataTable(jsonData);

        // *** 关键修改部分：检查并添加默认值 ***
        if (data.getNumberOfRows() === 0) {
            // 如果 DataTable 没有数据行，则添加一个默认值
            // 'Temp' 是标签，0 是默认数值
            data.addRows([
                ['Temp', 0] 
            ]);
        }
        // *** 关键修改部分结束 ***

        // 绘制图表
        chart.draw(data, options);

        // 每隔 5 秒刷新图表
        window.setTimeout(drawChart, 5000);
    });
}

登录后复制

解释：

Quinvio AI

AI辅助下快速创建视频，虚拟代言人

查看详情

data.getNumberOfRows() === 0：这一行检查 DataTable 对象中实际的数据行数量。如果为零，则表示后端没有返回任何数据。
data.addRows([['Temp', 0]]);：如果 DataTable 为空，我们使用 addRows() 方法手动向其中添加一个数据行。这里，'Temp' 是仪表盘的标签，0 是我们设定的默认显示值。你可以根据实际需求调整这个默认值。

通过这种方式，即使数据库中没有数据，仪表盘也会显示为 0。一旦数据库中有了新的数据，postData.php 将返回实际数据，data.getNumberOfRows() 将不再为零，从而 addRows() 不会被调用，真实数据将覆盖默认值。

完整代码示例

为了方便理解和实践，以下是包含上述解决方案的完整前端和后端代码。

conn.php (数据库连接示例)

<?php
$servername = "localhost";
$username = "your_username";
$password = "your_password";
$dbname = "your_database";

// 创建连接
$conn = new mysqli($servername, $username, $password, $dbname);

// 检查连接
if ($conn->connect_error) {
    die("连接失败: " . $conn->connect_error);
}
// 设置字符集，防止中文乱码
$conn->set_charset("utf8");
?>

登录后复制

postData.php

<?php
require 'conn.php'; // 引入数据库连接文件

// 查询最新的一条传感器数据
$sql = "SELECT * FROM sensors ORDER BY id DESC LIMIT 1";
$result = $conn->query($sql) or die ($conn->error);

// 初始化数据数组，包含列定义
$data = [];
$data[] = [["label"=>"Label","type"=>"string"],["label"=>"Value","type"=>"number"]];

// 遍历查询结果，将数据添加到数组中
while ($row = $result->fetch_assoc()) {
   $data[] = ["Temp", (float) $row["temp"]];   
}

// 将数据数组编码为 JSON 格式并输出
echo json_encode($data, JSON_NUMERIC_CHECK);

// 释放结果集并关闭数据库连接
$result->free();
$conn->close();
?>

登录后复制

index.php (包含解决方案)

<!DOCTYPE html>
<html>
<head>
    <title>Google Charts Gauge Demo</title>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
        body { font-family: Arial, sans-serif; }
        #chart_div { margin: 20px; border: 1px solid #eee; }
    </style>
</head>
<body>
    <h1>传感器温度仪表盘</h1>
    <div id="chart_div" style="width: 400px; height: 120px;"></div>

    <script>
        google.charts.load('current', {
            packages: ['gauge']
        }).then(function () {
            var options = {
                width: 400, height: 400,
                redFrom: 90, redTo: 100,
                yellowFrom:75, yellowTo: 90,
                minorTicks: 5
            };

            var chart = new google.visualization.Gauge(document.getElementById('chart_div'));

            drawChart(); // 首次绘制图表

            function drawChart() {
                $.ajax({
                    url: 'postData.php',
                    dataType: 'json'
                }).done(function (jsonData) {
                    var data = google.visualization.arrayToDataTable(jsonData);

                    // 如果 DataTable 没有数据行，则添加一个默认值
                    if (data.getNumberOfRows() === 0) {
                        data.addRows([
                            ['Temp', 0] // 默认显示 'Temp' 为 0
                        ]);
                    }

                    chart.draw(data, options); // 绘制图表

                    window.setTimeout(drawChart, 5000); // 每隔 5 秒刷新
                }).fail(function(jqXHR, textStatus, errorThrown) {
                    console.error("AJAX 请求失败: " + textStatus, errorThrown);
                    // 可以在此处添加错误处理，例如显示“数据加载失败”信息
                    // 也可以选择在失败时仍显示默认图表
                    var data = google.visualization.arrayToDataTable([
                        ["Label", "Type"],
                        ["Temp", 0] // 请求失败时也显示默认值
                    ]);
                    chart.draw(data, options);
                    window.setTimeout(drawChart, 5000); // 即使失败也尝试刷新
                });
            }
        });
    </script>
</body>
</html>

登录后复制

注意事项与最佳实践

默认值的选择：在示例中，我们使用了 0 作为默认值。根据你的应用场景，这个默认值可能需要调整。例如，如果 0 是一个有效的测量值，你可能需要选择一个更明确的“无数据”指示符（如 -1），或者在图表区域显示“无数据”文本而非仪表盘。对于仪表盘，0 通常是一个合理的安全默认值。
用户体验：当无数据时，仅仅显示一个默认值可能不够直观。你可以考虑在图表下方或旁边添加一个文本提示，如“当前无传感器数据”或“数据加载中...”，以增强用户体验。
错误处理：在 $.ajax 请求中添加 .fail() 回调函数是非常重要的。它允许你在 AJAX 请求失败（例如网络问题、服务器错误）时优雅地处理情况，而不是让页面崩溃或显示空白。在示例中，我们添加了一个简单的错误日志，并仍然绘制了带有默认值的图表。
分离关注点：这种客户端处理无数据的方法很好地实践了前后端分离的原则。后端（PHP）专注于从数据库获取原始数据，而前端（JavaScript）则负责数据的展示逻辑，包括处理无数据时的默认显示。

总结

通过在客户端 JavaScript 中增加一个简单的条件判断，我们能够有效地处理 Google Charts 仪表盘在后端无数据时的显示问题。这种方法不仅确保了图表的健壮性和用户体验，还使得代码逻辑更加清晰，将数据获取和数据展示的职责进行了合理划分。无论数据库是否有数据，你的仪表盘都将始终如一地、优雅地呈现在用户面前。

以上就是在 Google Charts 仪表盘中优雅地处理无数据情况的详细内容，更多请关注php中文网其它相关文章！