本文详解如何在使用 xmlhttprequest 轮询 php 接口更新 chartjs 图表时，防止相同数值被重复添加到数据集，确保图表仅展示最新唯一数据点。
在构建实时监控类图表（如传感器读数、系统负载趋势）时，常采用 XMLHttpRequest 定期拉取后端数据并动态更新 ChartJS 图表。但实践中容易出现一个典型问题： 同一数值被连续多次追加至 datasets.data 数组中，导致图表上出现冗余、重复的数据点 （如连续多个“6”），不仅影响可视化准确性，还可能造成内存持续增长和性能下降。
根本原因在于：当前逻辑未对新获取的数据与图表中最新已存在数据进行比对，每次请求成功即无条件 push()，而 PHP 接口若返回值暂未更新（例如数据库尚未写入新记录），就会反复推送相同数字。
✅ 推荐解决方案：客户端去重判断
在 onreadystatechange 回调中，于执行 push() 前校验新数据是否与当前数据集末尾值一致。若相同，则跳过本次更新：
var Data; function loadXMLDOC() { var request = new XMLHttpRequest(); request.onreadystatechange = function() { if (request.readyState === 4 && request.status === 200) {Data = this.responseText.trim(); // 建议 trim() 防止空格干扰 const dataset = myChart.data.datasets[0].data; // ✅ 关键校验：仅当新值与最后一个已有值不同时才添加 if (dataset.length > 0 && dataset[dataset.length - 1] == Data) {return; // 跳过重复值，不更新图表} myChart.data.labels.push(""); // 可考虑用时间戳替代空字符串提升可读性 myChart.data.datasets[0].data.push(parseFloat(Data)); // 强制转为数字，避免字符串参与计算 myChart.update(); // 重绘图表} }; request.open('GET', 'data.php', true); request.send();} // 每秒轮询一次 setInterval(loadXMLDOC, 1000); // 修正 window.onload 的函数名拼写错误（原为 loadXMLDoc → loadXMLDOC）window.onload = loadXMLDOC;⚠️ 注意事项：类型一致性：responseText 默认为字符串，建议使用 parseFloat() 或 parseInt() 转换为数值，避免后续图表计算异常（如 [“6”, “6”] 与 [6, 6] 在某些插件行为中表现不同）；初始状态处理：首次加载时 dataset 为空数组，dataset[dataset.length – 1] 为 undefined，因此需先判断 dataset.length > 0；标签同步：labels.push(“”) 易导致横轴难以识别。推荐改用时间戳（如 new Date().toLocaleTimeString()）或自增索引，增强图表可追溯性；错误容错：应补充 request.status !== 200 和网络异常处理，避免静默失败；服务端协同更优：长期来看，建议在 PHP 层增加“上次返回值缓存 + 条件响应”机制（如仅当数据库值变更时才输出新数字），从源头减少无效传输，降低客户端负担。
通过上述客户端轻量级校验，即可稳定实现“有变化才更新”的实时图表逻辑，兼顾简洁性与可靠性，是前端实时可视化开发中的实用范式。
