将 PHP/MySQL 数据集成到 Chart.js 图表：完整教程-php教程-PHP中文网

将 PHP/MySQL 数据集成到 Chart.js 图表：完整教程

php中文网

发布： 2025-08-19 23:16:19

原创

444人浏览过

将 PHP/MySQL 数据集成到 Chart.js 图表：完整教程

本教程详细介绍了如何将 PHP 从 MySQL 数据库中获取的数据高效地传递给 Chart.js，以动态生成图表。我们将探讨两种主要的数据准备方法：在数据循环中分别收集标签和数值，以及利用 array_column 函数从现有数组中提取数据。最终，学习如何将这些准备好的 PHP 数据以 JSON 格式嵌入到 JavaScript 中，从而在网页上成功渲染动态图表。

在现代 web 应用中，数据可视化是不可或缺的一部分。chart.js 作为一个轻量级且功能强大的 javascript 图表库，常被用于在前端展示数据。然而，数据通常存储在后端数据库中（例如 mysql），并通过 php 进行检索。将 php 后端获取的结构化数据无缝地传递给 chart.js 的 labels 和 data 属性是实现动态图表的关键一步。本教程将指导您完成这一过程，确保数据格式正确且易于集成。

1. 数据获取与初始结构

首先，我们需要从 MySQL 数据库中获取数据。假设我们有一个 chat_logs 表记录聊天信息，并希望统计每个用户的聊天次数。

<?php
// 数据库连接配置 (示例，请替换为您的实际配置)
$servername = "localhost";
$username = "root";
$password = "your_password";
$dbname = "your_database";

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

// 检查连接
if ($conn->connect_error) {
    die("连接失败: " . $conn->connect_error);
}

// 查询数据
$sql = "SELECT users.name, COUNT(*) AS times FROM chat_logs INNER JOIN users ON chat_logs.sender_email = users.email GROUP BY chat_logs.sender_email ORDER BY times DESC";
$rscht = $conn->query($sql);

if (!$rscht) {
    die("查询失败: " . $conn->error);
}

// 初始化一个用于存储原始数据的数组 (可选，但有助于理解后续步骤)
$chatstack = array();
while ($userchat = $rscht->fetch_assoc()) {
    $chatstackitem['label'] = $userchat['name'];
    $chatstackitem['value'] = $userchat['times'];
    array_push($chatstack, $chatstackitem);
}

// 关闭数据库连接
$conn->close();
?>

登录后复制

此时，$chatstack 数组的结构可能如下所示：

[
    {"label":"John Mark","value":"25"},
    {"label":"Sandra Friday","value":"12"},
    {"label":"Kelvin Russel","value":"4"}
]

登录后复制

Chart.js 的 labels 属性期望一个字符串数组（如 ['John Mark', 'Sandra Friday', 'Kelvin Russel']），而 data 属性期望一个数字数组（如 [25, 12, 4]）。直接将 $chatstack 进行 json_encode 会得到一个对象数组，这不符合 Chart.js 的直接要求。因此，我们需要对数据进行进一步处理。

2. PHP 数据准备：两种方法

为了将数据适配 Chart.js 的要求，我们需要将 label 和 value 分别提取到独立的 PHP 数组中，然后将它们转换为 JSON 字符串。

立即学习“PHP免费学习笔记（深入）”；

方法一：在数据循环中分离数据

这种方法在遍历数据库结果集时，直接将标签和数值分别添加到两个独立的数组中。

<?php
// ... (数据库连接和查询代码同上) ...

$chatLabels = [];
$chatData = [];

// 重置结果集指针或重新执行查询，如果上面已经遍历过 $rscht
// 这里假设 $rscht 是一个可再次遍历的结果集，或者重新执行查询
$rscht->data_seek(0); // 将结果集指针重置到开头

while ($userchat = $rscht->fetch_assoc()) {
    $chatLabels[] = $userchat['name']; // 收集标签
    $chatData[] = (int)$userchat['times']; // 收集数值，并确保为整数类型
}

// 将 PHP 数组转换为 JSON 字符串
$chatLabelsJson = json_encode($chatLabels);
$chatDataJson = json_encode($chatData);

// 此时 $chatLabelsJson 类似于: ["John Mark","Sandra Friday","Kelvin Russel"]
// 此时 $chatDataJson 类似于: [25,12,4]

// ... (关闭数据库连接代码同上) ...
?>

登录后复制

注意事项：

爱图表

AI驱动的智能化图表创作平台

查看详情

$chatData[] = (int)$userchat['times'];：将 times 强制转换为整数类型。虽然 json_encode 通常能正确处理数字字符串，但在某些情况下，明确的类型转换可以避免潜在问题，特别是当 Chart.js 期望数值类型时。

方法二：使用 array_column 从现有数组中提取

如果您的数据已经整理成 $chatstack 这样的数组（包含多个关联数组，每个关联数组有 label 和 value 键），您可以使用 array_column 函数快速提取特定列的值。

<?php
// ... (数据库连接和查询代码同上) ...

// 假设 $chatstack 已经通过之前的循环填充完毕
// $chatstack 结构: [{"label":"John Mark","value":"25"}, ...]

$chatLabels = array_column($chatstack, 'label');
$chatData = array_column($chatstack, 'value');

// 将 PHP 数组转换为 JSON 字符串
$chatLabelsJson = json_encode($chatLabels);
$chatDataJson = json_encode($chatData);

// ... (关闭数据库连接代码同上) ...
?>

登录后复制

这种方法更加简洁，特别适用于您已经有一个结构化数组的情况。

3. 将数据集成到 Chart.js

在 PHP 中准备好 chatLabelsJson 和 chatDataJson 这两个 JSON 字符串后，您可以通过 PHP 的 echo 语句将它们直接输出到 HTML/JavaScript 代码中。

<!DOCTYPE html>
<html>
<head>
    <title>Chart.js PHP 数据示例</title>
    <!-- 引入 Chart.js 库 -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <canvas id="chats"></canvas>

    <script>
        // 从 PHP 获取数据
        const labels = <?php echo $chatLabelsJson; ?>;
        const data = <?php echo $chatDataJson; ?>;

        const pieChart2 = new Chart(document.getElementById('chats'), {
            type: 'pie',
            data: {
                labels: labels, // 使用从 PHP 传入的标签数组
                datasets: [{
                    data: data, // 使用从 PHP 传入的数据数组
                    backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#9966FF', '#FF9900'], // 根据需要添加更多颜色
                    hoverBackgroundColor: ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#9966FF', '#FF9900']
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        position: 'top',
                    },
                    title: {
                        display: true,
                        text: '用户聊天次数统计'
                    }
                }
            }
        });
    </script>
</body>
</html>

登录后复制

关键点：

<?php echo $chatLabelsJson; ?> 和 <?php echo $chatDataJson; ?>：这些 PHP 标签会将服务器端生成的 JSON 字符串直接插入到客户端的 JavaScript 代码中。由于 json_encode 已经确保了输出是合法的 JavaScript 数组字面量（例如 ["John Mark","Sandra Friday"]），因此可以直接赋值给 JavaScript 变量。

总结

通过上述步骤，我们成功地将 PHP 从 MySQL 数据库中查询到的动态数据，以 Chart.js 所需的格式传递给了前端。无论是通过在循环中分离数据，还是利用 array_column 函数，核心思想都是将标签和数值分别提取到独立的 PHP 数组中，然后使用 json_encode 将它们转换为 JSON 字符串，最终在 HTML/JavaScript 中引用。这种方法不仅高效，而且使得后端数据与前端可视化之间的集成变得简单而强大，为构建动态、数据驱动的 Web 应用奠定了基础。

以上就是将 PHP/MySQL 数据集成到 Chart.js 图表：完整教程的详细内容，更多请关注php中文网其它相关文章！