Angular NGX Chart：调整 x 轴刻度数

Question

我正在开发带有一些折线图的应用程序。我在“ngx-chart”库中使用折线图。它有效，但我希望有更好的轴显示。 我的数据是根据日期的温度值。 实际上，图表为每个值显示一个标签。如果我有 100 个值，则有 100 个刻度标签。所以我想限制刻度数。

我使用 Angular 和 NGX 图表。 我在文档中看到参数“xAxisTicks”，但似乎这不是好方法

组件.html：

<ngx-charts-line-chart
  [legendTitle]="legendTitle"
  [xAxisTickFormatting]="xAxisTickFormatting"
  [view]=""
  [scheme]="colorScheme"
  [results]="temperatures"
  [gradient]="gradient"
  [xAxis]="showXAxis"
  [yAxis]="showYAxis"
  [legend]="showLegend"
  [showXAxisLabel]="showXAxisLabel"
  [showYAxisLabel]="showYAxisLabel"
  [xAxisLabel]="xAxisLabel"
  [yAxisLabel]="yAxisLabel"
  [autoScale]="autoScale"
  (select)="onSelect($event)">
</ngx-charts-line-chart> 

组件.ts

legendTitle = "Température actuelle";
showXAxis = true;
showYAxis = true;
gradient = false;
showLegend = true;
showXAxisLabel = true;
xAxisLabel = 'Heure';
showYAxisLabel = true;
yAxisLabel = 'Température';
// xAxisTicks = [
//   new Date("2019-10-06 10:00:00"),
//   new Date("2019-10-06 10:30:00"),
//   new Date("2019-10-06 11:00:00"),
//   new Date("2019-10-06 11:30:00"),
//   new Date("2019-10-06 12:00:00"),
// ]
colorScheme = {domain: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA'] };
autoScale = true; 

数据：

multi = [
{
   "name": "Exterieur",
   "series": [
     {
       "name": new Date("2019-10-09 10:00:00"),
       "value": 15
     },
     {
       "name": new Date("2019-10-11 10:10:00"),
       "value": 17
     }
   ]
 }]

实际结果：

我想要这个:

更少的标签，但保留所有数据。

这可以用 ngx 图表实现吗？

Answer 1

不确定是否有办法手动限制刻度数，但我注意到在 X 轴上使用数字似乎会显示更少的刻度数。因此，您可以做的是将日期值转换为毫秒，然后使用输入属性“xAxisTickFormatting”将它们再次格式化为可读的日期字符串。