英文:
Firestore orderBy("Date", "desc") is not working properly in the chart.js graph
问题
我们的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 中的日期格式如下：
英文:
Our Firestore dataset includes data that show date and time. I have used ...orderBy("Date", "desc"); I have tried this with tables and it is working well with tables, but it is not working with chart.js line graph.
So far, I did in the following procedures:
$(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);
});
});
Output is like this:
So, How I can order date and time properly in this case, anyone could help?!
Date format in the Firestore like in the following:
答案1
得分: 1
在2023年，主要浏览器中的JavaScript捕捉到了在2022年引入到Unicode通用区域设置存储库中的bug 16399。该bug将 en-CA 数字日期格式设定为美国日期格式，而非加拿大标准的 YYYY-MM-DD 格式。
在Unicode和浏览器修复之前的一个解决方法是使用 "fr-CA" 日期格式。
英文:
In 2023, Javascript in the major browsers has picked up bug 16399 introduced during 2022 into the Unicode Common Locale Data Repository. The bug has set en-CA numeric date format to American date format instead of the Canadian standard YYYY-MM-DD format.
A workaround until unicode and the browsers are fixed is to use "fr-CA" date format instead.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论