Question

在ngx-area-chart中，我想设置最大值。在xAxis上显示标签为5。如果我只有几个值，这可以按预期工作（左边的例子），但是有了更多数据，标签开始旋转，它看起来像这个屏幕中的正确示例：

我想在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]输入来完成此操作。

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

希望有所帮助

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

1 个答案: