在yAxis canvas chartjs上显示其他标签

我想知道是否有一种方法可以控制要显示的标签数量-我知道有

步长

功能，但这是数字。我正在寻找类似于

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>

在my component.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' }];
            }
        );
    }

barChartOptions:any={
ScaleShowVerticalline:错误，
回答：是的，
比例：{
xAxes：[{
滴答声：{
贝吉纳泽罗：是的，
最高：100
}
}],
雅克斯：[{
滴答声：{
}
}]
},
工具提示：{
模式：“点”
}
};
条形图标签：字符串[]=[]；
barChartType:string='horizontalBar'；
条形图图例：布尔值=假；
条形图数据：任意[]=[]；
资料：有；
colorsOverride:数组=[{
背景颜色：“#6aaf6a”，
hoverBackgroundColor:“紫色”
}];
getChartData（链接：字符串）{
this.service.getQuery（link.subscribe）(
数据=>{
这个数据=数据；
this.barChartLabels=this.data.map（x=>x.display）；
this.chartData=this.data.map（x=>x.value）；
this.barChartData=[{data:this.chartData，标签：'sample'}]；
}
);
}

来源：

所提供的示例每隔一个标签空白一次

 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的一部分，更改它不会带来任何伤害。

来源：

所提供的示例每隔一个标签空白一次

 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的一部分，修改它不会带来任何伤害。

@ℊααnd这更像是一个数值区间，但我在寻找标签区间，就像它显示的一月、三月、五月的标签一样。。。。然而，条形图将显示每个月的情况。（基于您的示例）@ℊααnd是-您使用了什么属性@ℊααnd这更像是一个数值区间，但我在寻找标签区间，就像它显示的一月、三月、五月的标签一样。。。。然而，条形图将显示每个月的情况。（基于您的示例）@ℊααnd是-您使用了什么属性？