本文介绍如何在使用 xmlhttprequest 轮询 php 接口更新 chart.js 图表时，防止相同数值被重复添加到数据集，确保时间序列图表真实反映数据变化，而非冗余堆叠。
在构建实时监控类图表（如传感器读数、服务器负载、温度变化等）时，常采用 XMLHttpRequest 定时轮询后端 PHP 脚本获取最新数值，并通过 Chart.js 动态追加数据点。但实践中一个典型问题是：即使数据库值未变，前端仍持续将同一数字重复推入 datasets[0].data，导致图表出现大量重叠或阶梯式“假增长”（如图中连续多个相同高度的柱状/折线点）。
根本原因在于当前逻辑缺乏数据去重判断——每次请求成功后，无论响应内容是否与上一次相同，都无条件执行：
myChart.data.labels.push(" ");
myChart.data.datasets[0].data.push(Data);
myChart.update();这会造成数据集不断膨胀，视觉失真，且浪费内存与渲染资源。
云点滴客户关系管理CRM OA系统
下载
云点滴客户解决方案是针对中小企业量身制定的具有简单易用、功能强大、永久免费使用、终身升级维护的智能化客户解决方案。依托功能强大、安全稳定的阿里云平 台，性价比高、扩展性好、安全性高、稳定性好。高内聚低耦合的模块化设计，使得每个模块最大限度的满足需求，相关模块的组合能满足用户的一系列要求。简单 易用的云备份使得用户随时随地简单、安全、可靠的备份客户信息。功能强大的报表统计使得用户大数据分析变的简单，
✅ 正确做法：客户端智能去重
在插入新数据前，检查待添加值是否已为最新数据点。只需在回调中增加一行比对逻辑：
if (request.readyState === 4 && request.status === 200) {
const newData = this.responseText.trim(); // 注意去除可能的空格/换行
const dataset = myChart.data.datasets[0].data;
// 若数据集非空，且最后一条数据与本次响应一致，则跳过插入
if (dataset.length > 0 && dataset[dataset.length - 1] === newData) {
return; // 避免重复
}
myChart.data.labels.push(new Date().toLocaleTimeString()); // 建议用真实时间戳替代空格
myChart.data.datasets[0].data.push(newData);
// 可选：限制历史数据长度，防内存泄漏（例如仅保留最近 60 个点）
if (myChart.data.labels.length > 60) {
myChart.data.labels.shift();
myChart.data.datasets[0].data.shift();
}
myChart.update();
}⚠️ 注意事项：使用 .trim() 清理 PHP 输出的首尾空白（常见于 echo "6\n"; 导致 "6\n" !== "6"）；标签建议使用有意义的时间标识（如 new Date().toISOString()），而非 " "，便于用户理解横轴含义；强烈推荐配合 shift() 机制限制数据点总数，否则 setInterval 持续运行数小时后将显著拖慢页面性能；若业务允许，更优解是服务端控制：PHP 脚本应缓存上次返回值，仅当数据库值真正变更时才输出新数字（即“状态感知响应”），从源头减少无效传输。
? 补充：服务端优化示例（PHP）
综上，解决 Chart.js 重复数据的核心在于 “客户端校验 + 服务端协同”：前端做轻量级幂等判断，服务端承担状态管理职责。二者结合，即可构建稳定、准确、高性能的实时可视化系统。
