本文介绍如何在使用 xmlhttprequest 轮询 php 接口更新 chartjs 图表时，防止相同数值被重复添加到数据集，确保时间序列图表真实反映最新唯一值。
在构建实时监控类图表（如传感器读数、服务器负载、温度变化等）时，常采用 XMLHttpRequest 定时拉取后端数据并动态更新 ChartJS 图表。但一个常见陷阱是：即使后端返回相同数值，前端仍无条件追加新数据点，导致图表出现大量重复、冗余的水平线段（如图中连续多个“6”），既误导视觉判断，又浪费内存与渲染性能。
核心问题在于原始代码未做数据去重校验：
myChart.data.labels.push(" ");
myChart.data.datasets[0].data.push(Data); // ❌ 无条件插入✅ 正确做法是在插入前比对当前值与图表中最后一个已存在值是否一致。若相同，则跳过本次更新；仅当值发生变化时才新增数据点并重绘。
以下是优化后的完整逻辑（含健壮性增强）：
var Data;
function loadXMLDOC() {
var request = new XMLHttpRequest();
request.onreadystatechange = function() {
if (request.readyState === 4) {
if (request.status === 200) {
Data = this.responseText.trim(); // 去除首尾空格/换行，避免字符串隐式相等失败
const dataset = myChart.data.datasets[0];
const chartData = dataset.data;
const lastValue = chartData.length > 0 ? chartData[chartData.length - 1] : null;
// ✅ 仅当新值与上一个值不同（且非空）时才添加
if (lastValue !== Data && Data !== "") {
myChart.data.labels.push(new Date().toLocaleTimeString()); // 推荐使用真实时间戳作为标签
dataset.data.push(parseFloat(Data)); // 强制转为数字，保障 ChartJS 正确渲染
myChart.update();
}
} else {
console.warn("XHR failed:", request.status, request.statusText);
}
}
};
request.open('GET', 'data.php', true);
request.send();
}
// 每秒轮询一次（可根据业务调整间隔）
setInterval(loadXMLDOC, 1000);
// 注意：原代码中 window.onload = loadXMLDoc 存在拼写错误（应为 loadXMLDOC），已修正
window.onload = loadXMLDOC;? 关键改进说明：
- 严格值比较：使用 === 进行全等判断，并通过 .trim() 和 parseFloat() 统一数据类型，避免 "6" 与 6 或 "6\n" 被误判为不同；
- 时间标签语义化：将占位符 " " 替换为 new Date().toLocaleTimeString()，使横轴具备真实时间意义（推荐进一步使用 moment.js 或原生 Date.now() 配合 ChartJS 的 time scale）；
- 空值与错误防护：检查 request.status 异常并输出警告，防止静默失败；
- 初始化安全：首次插入前校验 chartData.length > 0，避免访问 undefined。
? 进阶建议：
- 服务端去重（更优）：在 data.php 中缓存上次返回值，仅当数据库新值真正变更时才输出——从源头减少无效传输，降低客户端负担；
- 防抖 + 超时控制：对高频轮询增加请求节流（如最小间隔 500ms）及超时设置（request.timeout = 3000），提升稳定性；
- 使用 Fetch API 替代 XHR：现代项目推荐 fetch() + async/await 写法，代码更简洁、可读性更强。
遵循上述实践，即可确保 ChartJS 图表每秒仅展示一个真实变化的数据点，真正实现轻量、准确、可信赖的实时可视化。
