ng2-charts

Question

我在 angular 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, 8, 49, 38, 34, 54, 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,159,177,1)',
  pointBackgroundColor: 'rgba(148,159,177,1)',
  pointBorderColor: '#fff',
  pointHoverBackgroundColor: '#fff',
  pointHoverBorderColor: 'rgba(148,159,177,0.8)'
}];

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

如有任何帮助，我们将不胜感激。

Answer 1

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

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

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

ng2-charts - Display only monday's date on x-axis of linechart

angular

HTML代码

TS代码