ngx 图表:设置在 xAxis 上显示的最大标签/刻度数并防止旋转

Question

在ngx面积图中，我想将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 ''
}
}

希望对你有帮助

Answer 2

玩 scss 为我修复了它。

.x.axis {
.tick {
display: none;
&:nth-child(4n) {
display: block;
}
}
}

这将每 4 个即时报价显示一次，相应地调整。

Answer 3

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

在文件开头定义参数：

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

像往常一样，使用与AsmaG上图相同的自定义标签功能定义您的ngx图表：

<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图表的神秘问题，根本没有渲染标签。