Firestore orderBy("Date", "desc") 在 chart.js 图中无法正常工作

问题描述 投票:0回答:1

我们的 Firestore 数据集包括显示日期和时间的数据。我用过 ...orderBy("Date", "desc");我已经用表格尝试过这个并且它与表格一起工作得很好,但它不适用于 chart.js 折线图。

到目前为止,我做了以下程序:

$(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);


       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);
});


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)",
                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,
            }]
        },
    
        }); 
        
    }).catch((error) => {
        console.log("Error getting document:", error);
    }); 
});

输出是这样的:

那么,在这种情况下我如何正确地订购日期和时间,有人可以帮忙吗?!

Firestore 中的日期格式如下所示:

javascript google-cloud-firestore chart.js
1个回答
0
投票

2023 年,主要浏览器中的 Javascript 已将 2022 年引入的 bug 16399 纳入 Unicode 通用区域设置数据存储库。该错误已将

en-CA
数字日期格式设置为美国日期格式,而不是加拿大标准 YYYY-MM-DD 格式。

在修复 unicode 和浏览器之前的解决方法是改用“fr-CA”日期格式。

© www.soinside.com 2019 - 2024. All rights reserved.