Отображение каждой другой метки на диаграмме холста yAxis

Я хотел знать, есть ли способ контролировать количество отображаемых меток - я знаю, что есть функция 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>

в моем 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' }];
            }
        );
    }

canvas charts ng2-charts
person bluePearl    schedule 11.07.2017    source источник
comment
@ ℊαα, и это скорее числовой интервал, но я ищу интервал меток, чтобы он отображал метки января, марта, мая .... но гистограммы будут отображаться для каждого месяца. (на основе вашего примера)   -  person bluePearl    schedule 11.07.2017
comment
@ℊααи да - какое свойство вы использовали?   -  person bluePearl    schedule 11.07.2017

Ответы (1)


arrow_upward
0
arrow_downward

Источник: Ограничить количество меток на линейной диаграмме Chart.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, и от его изменения не будет никакого вреда.

person James Valeii    schedule 05.01.2020