angular - ngx-charts:设置最大数量。在 xAxis 上显示标签/刻度并防止旋转

Question

在 ngx-area-chart 中，我想设置最大值。在 xAxis 上显示的标签为 5。
如果我只有几个值，这会按预期工作(左示例)，但有更多数据，标签开始旋转，看起来像此屏幕中的正确示例:

screenshot

我希望 xAxis 上只有 5 个标签并且不旋转，与图表中的值数量无关。我玩过这个 plunker仅通过更改 data.ts 中的值:

export var multi = [{
'name': 'Data',
'series': [
  {"name":"24 Aug 12:30","value":"1.35870168"},
  {"name":"24 Aug 12:40","value":"3.92566715"},
  {"name":"24 Aug 12:50","value":"8.5667666"},
  {"name":"24 Aug 13:00","value":"5.25927041"},
  {"name":"24 Aug 13:10","value":"4.99596386"},

  ....

]}];

任何帮助深表感谢。

Answer 1

我想这有点晚了，但也许这对其他人有用。
如果您想自定义 X 轴中的刻度数，您可以使用 [xAxisTickFormatting] 输入来完成此技巧。

<ngx-charts-area-chart 
  class='chart' 
  [view]="view" 
  [scheme]="colorScheme" 
  [results]="results" 
  [xAxis]="showXAxis" 
  [yAxis]="showYAxis" 
  [legend]="showLegend" 
  [showXAxisLabel]="showXAxisLabel" 
  [showYAxisLabel]="showYAxisLabel" 
  [xAxisLabel]="xAxisLabel"
	[yAxisLabel]="yAxisLabel" 
  [autoScale]="autoScale"
  [showGridLines]='false' 
  (select)="onSelect($event)" 
  [xAxisTickFormatting]='axisFormat'>
</ngx-charts-area-chart>

然后定义你的axisFormat函数(它只需要第一个刻度，中间的刻度和最后一个)，你可以根据你的需要自定义你的选项

  axisFormat(val) {
    if ( this.ticks[0] == val || this.ticks[this.ticks.length-1] == val || this.ticks[(this.ticks.length-1)/2] == val) {
      return val
    } else {
      return ''
   }
 }

希望能帮助到你