ng2-charts-在折线图的x轴上仅显示星期一的日期

问题描述

我正在使用角度为6的ng2-charts。

我使用的折线图在y轴上显示值，在x轴上显示日期。

Line chart image

所以我的要求就像星期一仅在x轴上显示日期。仍然悬停在图表上的数据点上，它应该向我显示带值的日期，只需更改x轴标签即可。

HTML代码

<canvas baseChart [colors]="lineChartColors" [datasets]="labelMFL" [labels]="lineChartLabels"
    [options]="lineChartOptions" [chartType]="'line'">

TS代码

public labelMFL: Array<any> = [{
  data: [20,8,49,38,34,54,10,20,10],label: 'ng2'
}];

public lineChartLabels: Array<any> = ['2020-07-13','2020-07-14','2020-07-15','2020-07-16','2020-07-17','2020-07-18','2020-07-19','2020-07-20','2020-07-21','2020-07-22','2020-07-23','2020-07-24','2020-07-25','2020-07-26']; 

public lineChartColors: Color[] = [{ // grey
  backgroundColor: 'rgba(148,159,177,0.2)',borderColor: 'rgba(148,1)',pointBackgroundColor: 'rgba(148,pointBorderColor: '#fff',pointHoverBackgroundColor: '#fff',pointHoverBorderColor: 'rgba(148,0.8)'
}];

public lineChartOptions: any = {
responsive: true,scales : {
  yAxes: [{
    ticks: {
      max : 60,min : 0,}
  }],xAxes: [{}],},};

任何帮助将不胜感激。

解决方法

要仅在x轴上显示星期一的日期，请在选项中添加以下配置：

xAxes: [{
    type: 'time',time: {
      unit: 'week',isoWeekday: true,tooltipFormat: 'D MMM',displayFormats: {
        week: 'D MMM'
      }
    }
  }],