Angular NGX 图表 : adjust X tick number

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”将它们再次格式化为可读的日期字符串。