Chart.js的x轴日期标签顺序不正确

cnh2zyt3  于 2023-10-18  发布在  Chart.js
关注(0)|答案(1)|浏览(149)

我有一个Chartjs的折线图,数据来自firestore collection。但是,以d/m/y为标签的x轴并不按日期顺序呈现,而是按将数据添加到数据库的顺序呈现。请问我如何按升序显示日期?

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

hfyxw5xn1#

解决方案我已经修复了它添加sort()。

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

相关问题