1

我更准确地使用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>

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

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

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

那么,我应该如何格式化数据标签并在值后添加“%”?

这是我的图表

4

3 回答 3

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>

  formatDataLabel(value )
  {
    return value + '%';
  }
于 2019-11-04T20:18:50.550 回答
1

您需要此参数 [yAxisTickFormatting] 并在 .ts 文件中像这样运行:

图表组件.ts

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

chart.component.html

<ngx-charts-bar-vertical
  [view]="view"
  [results]="chartData"
  [xAxis]="true"
  [yAxis]="true"
  [legend]="true"
  [showXAxisLabel]="true"
  [showYAxisLabel]="true"
  [yAxisTickFormatting]="percentTickFormatting"
>
</ngx-charts-bar-vertical>
于 2019-12-25T11:00:38.570 回答
0

我找到了一个使用querySelectorinnerHTML的解决方案,如下所示:

 document.querySelectorAll(text.textDataLabel).innerHTML += '%';
于 2019-04-04T16:55:01.950 回答