ngx-charts-bar-水平数据标签格式化

Question

我正在使用 ngx-charts 更确切地说 bar-horizo​​ntal。我想要做的是格式化数据标签并在末尾添加 % 。 我尝试使用 [xAxisTickFormatting] 但它不起作用，因为根据我的观察，我的值不在 ngx-charts-x-axis 但在 ngx-charts-series-horizo​​ntal.

ngx-图表用作波纹管：

<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 + '%'.

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

here is my chart

Answer 1

我找到了一个使用 querySelector 和 innerHTML 的解决方案：

 document.querySelectorAll(text.textDataLabel).innerHTML += '%';

Answer 2

试试这个。

<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 + '%';
  }

Answer 3

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

chart.component.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>

Answer 4

我将此代码添加到 CSS 文件以更改文本样式：

::ng-deep .ngx-charts .tick text {
    text-anchor: start;
    font-size: 20px !important;
    color: red !important;
}