多温度传感器折线图X轴时间混乱问题排查与解决

场景概述 #

在Apache环境下开发原型，通过get_data.php接口获取12小时内多台温度传感器的sensor_name、温度值及服务器生成的timestamp数据，使用Chart.js绘制多折线图展示传感器温度变化趋势。

遇到的问题 #

• 初始代码运行后，X轴时间顺序完全混乱，折线出现无规律跳变，无法正常展示温度随时间的变化趋势。
• 尝试自定义时间适配器适配时间格式后，页面直接无响应，问题未解决反而引发新异常。

最终解决方案 #

通过引入moment.js和chartjs-adapter-moment组件，完美解决了时间轴排序及折线异常问题，实现了多折线图的正常显示。

关键步骤 #

1. 在页面中引入moment.js库
2. 引入chartjs-adapter-moment适配器组件
3. 配置Chart.js的X轴为时间类型，按需指定时间格式

示例配置片段：

const ctx = document.getElementById('temperatureChart').getContext('2d');
const chart = new Chart(ctx, {
    type: 'line',
    data: {
        // 需确保数据集已按timestamp升序排序
        datasets: processedSensorData
    },
    options: {
        scales: {
            x: {
                type: 'time',
                time: {
                    unit: 'hour', // 根据数据粒度调整
                    tooltipFormat: 'YYYY-MM-DD HH:mm'
                },
                title: {
                    display: true,
                    text: '时间'
                }
            },
            y: {
                title: {
                    display: true,
                    text: '温度(℃)'
                }
            }
        }
    }
});

注意事项 #

• 确保接口返回的timestamp数据可被moment.js正确解析（如Unix时间戳或标准时间字符串）
• 若接口返回数据未按时间顺序排列，需在前端先对各传感器数据集按timestamp升序排序，再传入Chart.js

内容的提问来源于stack exchange，提问作者RavenReign