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 个月订单金额：
立即学习“PHP免费学习笔记（深入）”；
$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) 插入 标签是最简方式，但必须转义引号、禁止 XSS。别用 echo $chartData 或拼接字符串。
- 用
JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT四个标志组合调用json_encode()，防止 HTML 特殊字符破坏 JS 结构 - 确保 PHP 变量已定义且非 null，否则
json_encode(null)会输出null，导致 JS 报错Cannot read property 'labels' of null - 示例写法：
const chartData = ;
然后在同一个 块中初始化：new Chart(ctx, { type: 'line', data: chartData, options: {...} });
为什么折线图不显示或只显示一个点
常见原因不是 PHP 出错，而是前后端数据对不上。Chart.js 对空数组、null、类型混杂极其敏感。
-
labels和data长度不一致 → 折线图空白或报Cannot read property '0' of undefined -
data里有null或''字符串 → 该点断开，看起来像“消失” - PHP 时间字段用了
date('Y-m-d H:i:s')但没去重 →labels出现大量重复值，图表挤成一团 - Canvas 元素没设宽高（或被 CSS 覆盖为 0×0）→ 看不见图，控制台无报错
调试建议：在浏览器控制台打印 chartData.labels 和 chartData.datasets[0].data，确认长度、类型、是否为空。PHP 端加 var_dump(count($labels), count($data)); 快速核对。