уменьшить количество значений, отображаемых на линейной диаграмме ng2-диаграмм в угловых - PullRequest
Новая
       36

уменьшить количество значений, отображаемых на линейной диаграмме ng2-диаграмм в угловых

0 голосов
/ 19 мая 2019

Я использую ng2-диаграммы для отображения линейных диаграмм в угловых значениях. Ось X показывает только несколько меток, чтобы она не была переполнена.

Но по оси Y показаны все значения. График выглядит следующим образом.

enter image description here

Можно ли показать только те значения y, для которых отображаются метки оси x?

Мой код 

labels = ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'];

  chartData = [
    {
      fill: false,
      data: [21, 22, 24, 21, 21, 22, 23, 24, 23, 22, 24, 25],
      borderColor : 'black',
      pointBackgroundColor: 'black',
      pointHoverBackgroundColor: '#fff',
      pointBorderColor: '#0062ff',
      pointHoverBorderColor: 'red',
    }
  ];

 updateChartData(){
    console.log('in update chart data')
    console.log('temp values' + this.temperatureArray)
    this.chartData1[0].data =  this.temperatureArray
    this.labels = this.timeArray
  }

Когда я обновляю данные диаграммы, количество меток (значений X) и значений y увеличивается

Ответы [ 2 ]

0 голосов
/ 19 мая 2019

Вы можете использовать ticks опции, предложенные @Tharzeer:

ticks callback: 

scales: {
  yAxes: [
    {
      ticks: {
        callback: value => value % 20 ? null : value
      }
    }
  ]
}

в этом примере все значения, которые делятся на 20, будут игнорироваться. Больше опций здесь .

callback аргументы value, index, values, так что вы имеете полный контроль над тем, что следует пропустить.

Я создал семпл STACKBLITZ с этим официальным демо для игры. Попробуйте изменить значения в ticks объекте (у вас есть 2 места для левой и правой меток)

0 голосов
/ 19 мая 2019

Параметры можно передать в диаграмму в html-файле. 

<canvas ... [options]="lineChartOptions" [chartType]="'line'"></canvas>

Параметры ожидают объект, в котором вы можете настроить шкалы для максимальных значений и другие вещи

https://www.chartjs.org/docs/latest/charts/line.html

...