4

在 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"},

  ....

]}];

任何帮助深表感谢。

4

2 回答 2

3

我想这有点晚了，但也许这对其他人有用。如果您想自定义 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 ''
   }
 }

希望能帮助到你

于 2017-10-20T08:26:30.557 回答
0

我确信有更好的方法，但这就是我解决它的方法：

在文件开头定义参数：

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

像往常一样使用 AsmaG 所示的相同自定义标签函数定义您的 ngx-chart：

<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 的神秘问题，根本没有呈现任何标签。

于 2021-10-26T00:59:01.597 回答