Firestore orderBy(“Date”, “desc”)在chart.js图表中无法正常工作。

huangapple
go评论92阅读模式
英文:

Firestore orderBy("Date", "desc") is not working properly in the chart.js graph

问题

我们的Firestore数据集包括显示日期和时间的数据。我已经使用 ...orderBy("Date", "desc"); 进行了排序。我尝试在表格中使用它，对表格来说工作得很好，但在 chart.js 的线图中不起作用。

到目前为止，我按照以下步骤操作：

  1. $(document).ready(function(){
  2.     firebase.initializeApp(firebaseConfig);
  3.     var db = firebase.firestore();
  5.     var timeOptions = {hourCycle: 'h23', hour: '2-digit', minute:'2-digit'};
  6.     var dateOptions = { day: 'numeric', month: 'numeric' };
  8.     var docRef = db.collection('Users').doc('000').collection('Data').orderBy("Date", "desc").limit(100);
  10.     docRef.get().then((querySnapshot) => {
  11.         querySnapshot.forEach((doc)=>{
  12.             var one = doc.data();
  13.             var date = one.Date.toDate().toLocaleDateString('en-CA', dateOptions) + " " + one.Date.toDate().toLocaleTimeString( [],  timeOptions);
  14.             labelsDateArray.push(date);
  15.         });
  17.         var ctx = document.getElementById("myChart");
  18.         var myChart = new Chart(ctx, {
  19.             type: 'line',
  20.             data: {
  21.                 labels: labelsDateArray,
  22.                 datasets: [{
  23.                     label: 'Kefa-Firestore-Dataset',
  24.                     fill: false,
  25.                     showLine: true,
  26.                     lineTension: 0.2,
  27.                     backgroundColor: "rgba(75, 192, 192,0.4)",
  28.                     borderColor: "rgba(139, 0, 0, 1)",
  29.                     borderCapStyle: 'butt',
  30.                     borderDash: [],
  31.                     borderDashOffset: 0.0,
  32.                     borderJoinStyle: 'miter',
  33.                     pointBorderColor: "rgba(139, 0, 0, 0.5)",
  34.                     pointBackgroundColor: "red",
  35.                     pointBorderWidth: 2,
  36.                     pointHoverRadius: 5,
  37.                     pointHoverBackgroundColor: "rgba(0, 0, 0, 1)",
  38.                     pointHoverBorderColor: "rgba(0, 0, 0, 1)",
  39.                     pointHoverBorderWidth: 5,
  40.                     pointRadius: 3,
  41.                     pointHitRadius: 10,
  42.                 }]
  43.             },
  44.         });
  45.     }).catch((error) => {
  46.         console.log("Error getting document:", error);
  47.     });
  48. });

输出如下图所示：
Firestore orderBy(“Date”, “desc”)在chart.js图表中无法正常工作。

那么，在这种情况下，如何正确排序日期和时间呢？有人可以帮助吗？

Firestore 中的日期格式如下：
Firestore orderBy(“Date”, “desc”)在chart.js图表中无法正常工作。

英文:

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:

  1. $(document).ready(function(){
  2. firebase.initializeApp(firebaseConfig);
  3. var db = firebase.firestore();
  4. var timeOptions = {hourCycle: 'h23', hour: '2-digit', minute:'2-digit'};
  5. var dateOptions = { day: 'numeric', month: 'numeric' };
  6. var docRef = db.collection('Users').doc('000').collection('Data').orderBy("Date", "desc").limit(100);
  7. docRef.get().then((querySnapshot) => {
  8. querySnapshot.forEach((doc)=>{
  9. var one = doc.data();
  10. var date = one.Date.toDate().toLocaleDateString('en-CA', dateOptions) + " " +  one.Date.toDate().toLocaleTimeString( [],  timeOptions);
  11. labelsDateArray.push(date);
  12. });
  13. var ctx = document.getElementById("myChart");
  14. var myChart = new Chart(ctx, {
  15. type: 'line',
  16. data: {
  17. labels: labelsDateArray,
  18. datasets: [{
  19. label: 'Kefa-Firestore-Dataset',
  20. fill: false,
  21. showLine: true,
  22. lineTension: 0.2,
  23. backgroundColor: "rgba (75, 192, 192,0.4)",
  24. borderColor: "rgba(139, 0, 0, 1)",
  25. borderCapStyle: 'butt',
  26. borderDash: [],
  27. borderDashOffset: 0.0,
  28. borderJoinStyle: 'miter',
  29. pointBorderColor: "rgba(139, 0, 0, 0.5)",
  30. pointBackgroundColor: "red",
  31. pointBorderWidth: 2,
  32. pointHoverRadius: 5,
  33. pointHoverBackgroundColor: "rgba(0, 0, 0, 1)",
  34. pointHoverBorderColor: "rgba(0, 0, 0, 1)",
  35. pointHoverBorderWidth: 5,
  36. pointRadius: 3,
  37. pointHitRadius: 10,
  38. }]
  39. },
  40. });	
  41. }).catch((error) => {
  42. console.log("Error getting document:", error);
  43. });	
  44. });

Output is like this:
Firestore orderBy(“Date”, “desc”)在chart.js图表中无法正常工作。

So, How I can order date and time properly in this case, anyone could help?!

Date format in the Firestore like in the following:
Firestore orderBy(“Date”, “desc”)在chart.js图表中无法正常工作。

答案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.

huangapple
  • 本文由 发表于 2023年2月16日 17:15:37
  • 转载请务必保留本文链接：https://go.coder-hub.com/75470041.html
  • chart.js
  • google-cloud-firestore
  • javascript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定