PHP结合Chart.js画折线图教程步骤

大家好，今天本人给大家带来文章《PHP用Chart.js画折线图教程步骤》，文中内容主要涉及到，如果你对文章方面的知识点感兴趣，那就请各位朋友继续看下去吧~希望能真正帮到你们，谢谢！

Chart.js 是前端库，须在HTML/JS中通过CDN引入并用PHP输出JSON数据渲染；PHP负责查询数据库、组织labels和datasets结构、json_encode()安全输出，前端fetch或内联调用初始化图表。

Chart.js 在 PHP 项目里怎么加载才不报错

Chart.js 是前端库，不能直接在 PHP 后端运行。常见错误是把 new Chart() 写在 PHP 文件里、或试图用 require_once 引入 Chart.js —— 这会直接报 ReferenceError: Chart is not defined 或空白图表。

正确做法是：PHP 负责准备数据（比如从数据库查出销售额数组），输出成 JSON；前端 HTML/JS 加载 Chart.js 后，用 fetch() 或内联 json_encode() 拿到数据再渲染。

• 确保 HTML 中通过 正确引入（CDN 地址别写错）
• PHP 输出数据时用 header('Content-Type: application/json'); + echo json_encode($data);，避免中文乱码或换行干扰 JS 解析
• 如果用 AJAX 加载，后端 PHP 脚本（如 get-sales.php）不要混杂 HTML 输出，保持纯 JSON

PHP 生成 Chart.js 所需的 labels 和 datasets 数据结构

Chart.js 折线图要求 labels 是字符串数组（如月份），datasets 是对象数组，每个对象含 label、data（数值数组）、可选 borderColor 等。PHP 需严格按这个结构组织数据。

例如从 MySQL 查近 6 个月订单金额：

$pdo = new PDO($dsn, $user, $pass);
$stmt = $pdo->query("SELECT DATE_FORMAT(created_at, '%Y-%m') as month, SUM(amount) as total FROM orders WHERE created_at > DATE_SUB(NOW(), INTERVAL 6 MONTH) GROUP BY month ORDER BY month");
$rows = $stmt->fetchAll(PDO::FETCH_ASSOC);

$labels = array_column($rows, 'month');
$data   = array_column($rows, 'total');

// 构造成 Chart.js 能用的格式
$chartData = [
    'labels'   => $labels,
    'datasets' => [[
        'label'           => '月销售额',
        'data'            => $data,
        'borderColor'     => 'rgb(75, 192, 192)',
        'fill'            => false,
        'tension'         => 0.1
    ]]
];

注意：array_column() 要求 PHP ≥ 5.5；若用旧版本，改用 foreach 手动提取；$data 必须是数字数组，不能是字符串（否则折线图显示为 0）。

在 HTML 中安全注入 PHP 数据到 Chart.js 初始化代码

直接把 json_encode($chartData) 插入