Как использовать yAxisTickFromatting, чтобы сделать процент yAxis по вертикали ngx-Charts Bar?

Question

В настоящее время я работаю с NGX-Charts версии 8.0.2, особенно с вертикальной гистограммой.

Я просматривал документацию по гистограмме и пытался выяснить, как отформатировать тики оси X с процентами.

пример: 20% 30% 40% 50% и т. Д.

Я немного покопался и нашел эту тему.

Функция для тикового форматирования потока

В основном это означало, что нужно будет использовать функцию для первого форматирования данных перед их передачей в формат yaxistickformatter.

Я продолжил копать и нашел эту ветку, которая дает представление о том, как форматировать выход указанной функции.

Как отформатировать строку локали в процентах

Итак, с помощью этих двух инструментов я попытался создать функцию, которая бы форматировала мою ось Y в процентах.

это мой файл компонента вертикальной гистограммы

import { Component, OnInit } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgxChartsModule } from '@swimlane/ngx-charts';
import { tankData } from '../data';

@Component({
selector: 'app-vertical-bar-chart',
templateUrl: './vertical-bar-chart.component.html',
styleUrls: ['./vertical-bar-chart.component.css']
})
export class VerticalBarChartComponent implements OnInit {

view = [700, 400];

// options
showXAxis = true;
showYAxis = true;
gradient = false;
results = tankData;
showLegend = true;
showXAxisLabel = true;
xAxisLabel = 'Country';
showYAxisLabel = true;
yAxisLabel = 'Population';

colorScheme = {
domain: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA']
};

constructor() { 
Object.assign(this, { tankData });
} 



ngOnInit() {
}

}

function percentTickFormatting(val: any): string {
return val.toLacaleString('en-us', {syle: 'percent', 
maximumSignificantDigits: 1});
} 

это мой HTML-файл вертикальной гистограммы

<ngx-charts-bar-vertical
[view] = "view"
[scheme]="colorScheme"
[results]="tankData"
[gradient]="gradient"
[xAxis]="showXAxis"
[yAxis]="showYAxis"
[legend]="showLegend"
[showXAxisLabel]="showXAxisLabel"
[showYAxisLabel]="showYAxisLabel"
[xAxisLabel]="xAxisLabel"
[yAxisLabel]="yAxisLabel" 
[yAxisTickFormatting] = "percentTickFormatting">
</ngx-charts-bar-vertical>

это мой файл данных:

export const tankData = [
{
 'name': 'Germany',
 'value': 90
},
{
'name': 'USA',
'value': 80
},
{
'name': 'France',
'value': 72
}
];  

Это окончательный результат

отметки оси y не были отформатированы в процентах.Я уверен, что я близок, возможно, мне может понадобиться передать значения из файла данных в функцию, которую я обрисую, чтобы затем ее можно было отформатировать и передать в график.Однако я не уверен, как это сделать.Любая помощь будет оценена.

Answer 1

на случай, если кто-то еще борется.Вот как я это сделал

<ngx-charts-bar-vertical-2d
  [scheme]="colorScheme"
  [view]="view"
  ...
  [yAxisTickFormatting]="yAxisTickFormattingFn"
  [xAxisTickFormatting]="xAxisTickFormattingFn">
</ngx-charts-bar-vertical-2d>

А потом

export class D3BarComponent{
  public yAxisTickFormattingFn = this.yAxisTickFormatting.bind(this);
  public yAxisTickFormattingFn = this.yAxisTickFormatting.bind(this);
  yAxisTickFormatting(value) {
    return value + "%" // this is where you can change the formatting
  }
  xAxisTickFormatting(value) {
    return value + "%" // this is where you can change the formatting
  }
}

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

Answer 2

Функция форматирования

Я нашел ответ, похороненный на форуме git.

import { Component, OnInit } from '@angular/core';
   import { BrowserModule } from '@angular/platform-browser';
   import { NgxChartsModule } from '@swimlane/ngx-charts';
   import { tankData } from '../data';

   @Component({
   selector: 'app-vertical-bar-chart',
   templateUrl: './vertical-bar-chart.component.html',
   styleUrls: ['./vertical-bar-chart.component.css']
   })
   export class VerticalBarChartComponent implements OnInit {

   view = [700, 400];

   // options
   showXAxis = true;
   showYAxis = true;
   gradient = false;
   results = tankData;
   showLegend = true;
   showXAxisLabel = true;
   xAxisLabel = 'Country';
   showYAxisLabel = true;
   yAxisLabel = 'Population';

   colorScheme = {
   domain: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA']
   };

   constructor() { 
   Object.assign(this, { tankData });
   } 



   ngOnInit() {
   }

   yAxisTickFormatting(value){ 
    return percentTickFormatting(value);
   }
   }

   function percentTickFormatting(val: any) {
   return val.toLocaleString() + '%';
   }

Остальная часть другого кода может остаться прежней, и это должно работать.Вы можете заменить символ% любым символом, который вам нужен, и он будет работать.

Лучший