Firestore orderBy(Date, desc)在Chart.js折线图中排序失效求助

问题核心 #

你通过orderBy("Date", "desc")从Firestore获取的文档确实是按时间降序返回的，但Chart.js会自动将日期格式的字符串标签解析为日期对象，并默认按时间升序重新排列，直接覆盖了你传入的原始顺序。另外你生成的MM/DD HH:MM格式字符串，其字典序和实际时间序也可能存在偏差，进一步加剧了排序混乱。

解决方案 #

方法1：禁用自动日期解析，保持原始传入顺序

直接指定Chart.js的X轴为分类轴，不解析日期，完全保留Firestore返回的降序顺序：

$(document).ready(function(){
    firebase.initializeApp(firebaseConfig);
    var db = firebase.firestore();

    var timeOptions = {hourCycle: 'h23', hour: '2-digit', minute:'2-digit'};
    var dateOptions = { day: 'numeric', month: 'numeric' };

    var docRef = db.collection('Users').doc('000').collection('Data').orderBy("Date", "desc").limit(100);
    var labelsDateArray = [];
    // 补充：假设你需要对应的数据值数组，根据实际字段修改
    var dataValues = [];

    docRef.get().then((querySnapshot) => {
        querySnapshot.forEach((doc)=>{
            var one = doc.data();
            var date = one.Date.toDate().toLocaleDateString('en-CA', dateOptions) + " " +  one.Date.toDate().toLocaleTimeString( [],  timeOptions);
            labelsDateArray.push(date);
            dataValues.push(one.YourDataField); // 替换为你实际的数值字段名
        });

        var ctx = document.getElementById("myChart");
        var myChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: labelsDateArray,
                datasets: [{
                    label: 'Kefa-Firestore-Dataset',
                    fill: false,
                    showLine: true,
                    lineTension: 0.2,
                    backgroundColor: "rgba(75, 192, 192,0.4)", // 修正原代码中rgba后的多余空格
                    borderColor: "rgba(139, 0, 0, 1)",
                    borderCapStyle: 'butt',
                    borderDash: [],
                    borderDashOffset: 0.0,
                    borderJoinStyle: 'miter',
                    pointBorderColor: "rgba(139, 0, 0, 0.5)",
                    pointBackgroundColor: "red",
                    pointBorderWidth: 2,
                    pointHoverRadius: 5,
                    pointHoverBackgroundColor: "rgba(0, 0, 0, 1)",
                    pointHoverBorderColor: "rgba(0, 0, 0, 1)",
                    pointHoverBorderWidth: 5,
                    pointRadius: 3,
                    pointHitRadius: 10,
                    data: dataValues // 绑定对应数据值
                }]
            },
            options: {
                scales: {
                    x: {
                        type: 'category', // 指定为分类轴，不解析日期
                        ticks: {
                            maxRotation: 45, // 可选：旋转标签避免重叠
                            minRotation: 45
                        }
                    }
                }
            }
        }); 
    }).catch((error) => {
        console.log("Error getting document:", error);
    }); 
});

方法2：使用时间轴并反转显示（推荐，支持时间轴特性）

如果需要Chart.js的时间轴功能（比如缩放、自动时间间隔），可以传入原始Date对象，配置时间轴后反转显示：

$(document).ready(function(){
    firebase.initializeApp(firebaseConfig);
    var db = firebase.firestore();

    var docRef = db.collection('Users').doc('000').collection('Data').orderBy("Date", "desc").limit(100);
    var rawDates = [];
    var dataValues = [];

    docRef.get().then((querySnapshot) => {
        querySnapshot.forEach((doc)=>{
            var one = doc.data();
            rawDates.push(one.Date.toDate()); // 保存原始Date对象
            dataValues.push(one.YourDataField); // 替换为实际数值字段名
        });

        var ctx = document.getElementById("myChart");
        var myChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: rawDates,
                datasets: [{
                    label: 'Kefa-Firestore-Dataset',
                    fill: false,
                    showLine: true,
                    lineTension: 0.2,
                    backgroundColor: "rgba(75, 192, 192,0.4)",
                    borderColor: "rgba(139, 0, 0, 1)",
                    borderCapStyle: 'butt',
                    borderDash: [],
                    borderDashOffset: 0.0,
                    borderJoinStyle: 'miter',
                    pointBorderColor: "rgba(139, 0, 0, 0.5)",
                    pointBackgroundColor: "red",
                    pointBorderWidth: 2,
                    pointHoverRadius: 5,
                    pointHoverBackgroundColor: "rgba(0, 0, 0, 1)",
                    pointHoverBorderColor: "rgba(0, 0, 0, 1)",
                    pointHoverBorderWidth: 5,
                    pointRadius: 3,
                    pointHitRadius: 10,
                    data: dataValues
                }]
            },
            options: {
                scales: {
                    x: {
                        type: 'time',
                        time: {
                            tooltipFormat: 'MM/DD HH:mm',
                            displayFormats: {
                                minute: 'MM/DD HH:mm',
                                hour: 'MM/DD HH:mm'
                            }
                        },
                        reverse: true, // 反转时间轴实现降序
                        ticks: {
                            maxRotation: 45,
                            minRotation: 45
                        }
                    }
                }
            }
        }); 
    }).catch((error) => {
        console.log("Error getting document:", error);
    }); 
});

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