Chart.js折线图X轴日期标签未按日期升序排列的问题及解决

我使用Chart.js制作了一个折线图，数据来源于Firestore集合。但X轴的d/m/y格式日期标签未按日期顺序渲染，而是按照数据存入数据库的顺序显示。请问如何让其按日期升序展示？

原代码如下：

const labels = this.data.map((x) => x.date);       
const dateLabels = labels.map(a=>this.datePipe.transform(a.toDate(), 'dd/mm/yyyy'));     
const ageLabels = this.data.map((x) => x.age);   

if (this.chart)
  this.chart.destroy();    
this.chart = new Chart('MyChart', {
  type: 'line',
  data: {
    labels: dateLabels,
    datasets: [
      {
        label: 'Age',
        data: ageLabels,
        backgroundColor: 'green',
      },
    ],
  },
  options: {
    aspectRatio: 2.5,
  },
});   

通过给提取出的日期数组添加sort()方法即可解决该问题：

const labels = this.data.map((x) => x.date).sort(); 

Firestore返回的数据默认按存入顺序排列，直接映射得到的日期数组自然是无序的。sort()方法可以直接对Date对象数组进行升序排序，排序后再转换为d/m/y格式的标签，同时对应的ageLabels会和排序后的日期一一对应，确保折线图的数据与标签匹配，最终X轴就能按日期升序展示。

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