ngx-charts: установить количество макс. отображать метки/галочки на xAxis и предотвращать вращение

В диаграмме ngx-area я хочу установить макс. отображаются метки на xAxis до 5. Если у меня есть только несколько значений, это работает, как и ожидалось (пример слева), но с большим количеством данных метки начинают вращаться, и это выглядит как правый пример на этом экране:

скриншот

Я хочу иметь только 5 меток на оси x и не вращать, независимо от количества значений на диаграмме. Я поэкспериментировал с этим plunker, изменив только значения в data.ts:

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"},

  ....

]}];

Любая помощь горячо приветствуется.


angular ngx-charts
person Tom    schedule 27.08.2017    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Я думаю, что это немного поздно, но, возможно, это будет полезно для кого-то еще. Если вы хотите настроить количество тиков по оси 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 ''
   }
 }

Надеюсь, поможет

person AsmaG    schedule 20.10.2017
comment
Спасибо за Ваш ответ. Я также пробовал то же самое, но это не работает. Это напечатает желаемое количество этикеток, но все еще вертикально. Мое окончательное решение состояло в том, чтобы полностью отключить ось X и поставить 5 статических меток перед диаграммой. Не красиво, но работает в этом случае. - person Tom; 22.10.2017
comment
Да, у меня та же проблема, и пока я позволяю трюкам быть вертикальными. Но я подумал, что это лучшее, что мы можем сделать, если мы хотим использовать эту библиотеку, не выполняя всю работу самостоятельно. Это должно быть изменено в ближайшие месяцы! Пожалуйста, отметьте ответ как принятый, если вы так думаете - person AsmaG; 23.10.2017