angular - ngx-charts-bar-horizontal formatering av datamerker


Jeg bruker ngx-charts, mer presist bar-horizontal. Det jeg prøver å gjøre er å formatere datamerkene og legge til % på slutten. Jeg har forsøkt å bruke [xAxisTickFormatting], men det fungerer ikke fordi, etter det jeg har lagt merke til, er ikke verdiene mine på ngx-charts-x-axis, men på ngx-charts-series-horizontal.

ngx-charts brukt som nedenfor:

<ngx-charts-bar-horizontal 
*ngIf='givesEnergyChartData && givesEnergyDataColorScheme'  
[scheme]="givesEnergyDataColorScheme"
[results]="givesEnergyChartData"
[gradient]="gradient"
[xAxis]="showXAxis"
[yAxis]="showYAxis"
[legend]="showLegend"
[view]="viewGiveEnergy"
[showXAxisLabel]="showXAxisLabel"
[showYAxisLabel]="showYAxisLabel"
[showDataLabel]="showDataLabel">
</ngx-charts-bar-horizontal>

Jeg har også prøvd å formatere på dataarray (jeg vet det var dumt, men jeg har prøvd :) )

this.givesEnergyChartData = this.statistic.givesEnergyData.map(
 s => {
   return { name: s.name, value: s.count } 
 });

ved å legge til for verdi: s.count + ''%'.

Så, hva bør jeg gjøre for å formatere datamerkningene og legge til '%' etter verdiene?

her er diagrammet mitt

Svar #1

Prøv dette.

<ngx-charts-bar-horizontal 
*ngIf='givesEnergyChartData && givesEnergyDataColorScheme'  
[scheme]="givesEnergyDataColorScheme"
[results]="givesEnergyChartData"
[gradient]="gradient"
[xAxis]="showXAxis"
[yAxis]="showYAxis"
[legend]="showLegend"
[view]="viewGiveEnergy"
[showXAxisLabel]="showXAxisLabel"
[showYAxisLabel]="showYAxisLabel"
  [dataLabelFormatting] = "formatDataLabel"
[showDataLabel]="showDataLabel">
</ngx-charts-bar-horizontal>

og

  formatDataLabel(value )
  {
    return value + '%';
  }

Relaterte artikler