PHP后端应输出标准JSON格式数据供前端Chart.js使用，结构为{"labels":[],"datasets":[{"data":[]}]},禁用图像生成和HTML拼接；AJAX轮询需用AbortController防请求堆积，Chart.js须复用实例调用update()更新数据。
PHP 后端怎么输出图表所需的数据格式
饼图数据本质是键值对数组，前端图表库（如 Chart.js）要的是 labels 和 datasets[0].data 两个字段。PHP 不生成图像，只输出 JSON——这是最容易混淆的起点。
常见错误：用 imagepng() 画图再塞进 HTML
- 后端脚本（比如
chart-data.php）应设置Content-Type: application/json - 用
json_encode()返回结构清晰的数组，例如：{"labels":["订单完成","待发货","已取消"],"datasets":[{"data":[42,35,23]}]} - 避免在 PHP 中拼接 HTML 或 JS 字符串传给前端——破坏前后端职责分离，后续改一个颜色都要重发 PHP
AJAX 怎么安全地每 5 秒拉一次饼图数据
轮询不是简单套个 setInterval 就完事。没加防抖、没处理请求堆积、没设超时，页面卡顿或数据错乱就是分分钟的事。
- 用
fetch()替代XMLHttpRequest，更简洁；加上{ cache: 'no-cache' }防止浏览器缓存旧数据 - 每次新请求发出前，用
AbortController主动中止上一次未完成的请求，避免“后发先至”覆盖正确数据 - 在
catch块里明确处理网络失败、500 错误、JSON 解析失败三种情况，至少让图表显示“加载失败”而不是空白 - 不要把刷新间隔写死在 JS 里，可从 HTML 的
data-refresh-interval属性读取，方便不同图表差异化配置
Chart.js 饼图初始化后如何只更新数据不重绘整个 canvas
每次重新 new Chart() 不仅浪费性能，还会导致动画闪屏、tooltip 丢失、甚至 DOM 节点泄漏。正确做法是复用实例，调用 .data.labels 和 .update()。
立即学习“PHP免费学习笔记（深入）”；
- 首次渲染后把 Chart 实例存在全局变量或闭包里（比如
let myPieChart），别让它被 GC 掉 - 更新时先清空原数据：
myPieChart.data.labels = newData.labels，再赋值myPieChart.data.datasets[0].data = newData.datasets[0].data - 最后必须调用
myPieChart.update('active')（'active'表示触发动画），否则界面不会变化 - 如果后端返回的 label 顺序不稳定，前端要用
Map做映射比对，避免因顺序错位导致“完成”显示成“已取消”的数值
为什么饼图数据突变为 0 时图表不更新或报错
这不是前端 bug，大概率是 PHP 输出了非预期内容：BOM 头、warning 日志、var_dump 残留、或多了一个空格。JSON 解析直接失败，fetch 进 catch，但你可能没打印错误。
- 在
chart-data.php开头加ob_end_clean();和ini_set('display_errors', 0);，杜绝任何非 JSON 输出 - 用
json_last_error()检查编码是否成功，失败时输出http_response_code(500)并终止脚本 - Chrome DevTools 的 Network 标签页里点开响应体，肉眼确认是不是纯 JSON——很多“数据没变”问题其实压根没走到 JS 更新逻辑
- 特别注意 MySQL 查询返回空结果集时，
mysqli_fetch_all()可能返回null，直接json_encode(null)得到的是null字符串，不是空数组
