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

Question

在ngx面积图中，我想设置最大值。将xAxis上的标签显示为5。如果我只有几个值，这将按预期工作(左侧示例)，但随着数据的增加，标签开始旋转，如此屏幕中的右侧示例所示：

screenshot

我希望xAxis上只有5个标签，并且不旋转，独立于图表中的值的数量。我只修改了data.ts中的值，使用了这个plunker：

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 input执行此操作。

​

<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 ''
   }
 }

希望能有所帮助

Answer 2

我相信有更好的方法，但我是这样解决的：

在文件开头定义参数：

var tickCounter: number = 0;
const tickInterval: number = 4;

像往常一样定义您的ngx图表，使用与上面AsmaG所示相同的自定义标签函数：

<ngx-charts-area-chart 
  class='chart' 
  ...
  [xAxisTickFormatting]='axisFormat'>
</ngx-charts-area-chart>

但这是我实现axisFormat的方式：

axisFormat(val:any) {
    return (++tickCounter % tickInterval) === 0 ? val : '';
  }

由于某些原因，在我的Angular 12.2.7项目中，后缀增量运算符被忽略了，但前缀可以工作。不清楚为什么。如果您确实需要呈现第一个数据标签，这对于某些项目可能是不可接受的。我试图更干净地实现它(即确保始终呈现第一个数据点，而不考虑tickInterval)，但遇到了ngx-charts的神秘问题，根本没有标签被呈现。