在 yAxis 画布图表上显示所有其他标签

Question

我想知道有没有办法控制要显示的标签数量 - 我知道有stepSize功能，但那是数字。我正在寻找类似interval:3的东西，因此它将在图表上显示每隔三个标签。

options: {
scales: {
xAxes: [{
ticks: {
beginAtZero:true,
max: 100
}
}],
yAxes: [{
ticks: {
}
}]
}
}

这是我渲染图表的方式：

.html：

<div class="chart-container" style="position: relative; height:20vh; width:40vw">
<canvas id="chartGraph"   baseChart [colors]="colorsOverride" [datasets]="barChartData" [labels]="barChartLabels" [options]="barChartOptions" [legend]="false" [chartType]="barChartType">
</canvas>
</div>

在我的组件.ts中，我有：

barChartOptions: any = {
scaleShowVerticalLines: false,
responsive: true,
scales: {
xAxes: [{
ticks: {
beginAtZero:true,
max: 100
}
}],
yAxes: [{
ticks: {
}
}]
},
tooltips:{
mode: 'point'
}
};
barChartLabels: string[] = [];
barChartType: string = 'horizontalBar';
barChartLegend: boolean = false;
barChartData: any[] = [];
data: any;
colorsOverride: Array<Color> = [{
backgroundColor: '#6aaf6a',
hoverBackgroundColor: 'purple'
}];
getChartData(link:string){
this.service.getQuery(link).subscribe(
data => {
this.data = data;
this.barChartLabels = this.data.map(x => x.display);
this.chartData = this.data.map(x => x.value);
this.barChartData = [{data: this.chartData, label:'sample' }];
}
);
}

Answer 1

来源：限制图表上的标签编号.js折线图

George 提供的示例将每隔一个标签都空白。

var options =  {  
scales: {
xAxes: [{
afterTickToLabelConversion: function(data){
var xLabels = data.ticks;
xLabels.forEach(function (labels, i) {
if (i % 2 == 1){
xLabels[i] = '';
}
});
} 
}]   
}
}

要保留 X 轴中的第一个值，然后保留第四、第八个等值，可以将 if 语句更改为：

if (i % 4 != 0){ 
xLabels[i] = ''; 
}

该解决方案也适用于 yAxes 选项。变量名 xLabels 不是 chartjs 的一部分，更改它不会造成任何伤害。