ngx-charts-bar-horizo​​ntal 数据标签格式

Ser*_*nar 1 charts typescript ngx-bootstrap angular ngx-charts

我正在使用ngx-charts更准确的bar-horizo​​ntal。我想要做的是格式化数据标签并在最后添加 % 。我曾尝试使用[xAxisTickFormatting]但它不起作用,因为从我注意到的情况来看,我的值不在ngx-charts-x-axis 上,而是在ngx-charts-series-horizo​​ntal 上

ngx-charts 用作波纹管:

<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>
Run Code Online (Sandbox Code Playgroud)

我也试过格式化数据数组(我知道这很愚蠢,但我试过:))

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

通过添加值: s.count + '%'

那么,我应该怎么做才能格式化数据标签并在值后添加“%”?

这是我的图表

Sre*_*ree 5

尝试这个。

<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>
Run Code Online (Sandbox Code Playgroud)

  formatDataLabel(value )
  {
    return value + '%';
  }
Run Code Online (Sandbox Code Playgroud)