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

时间:2019-04-04 12:17:07

标签: angular typescript charts ngx-bootstrap ngx-charts

我正在更准确地使用 ngx图表。我想做的是格式化数据标签并在末尾添加%。 我曾尝试使用 [xAxisTickFormatting] ,但由于我发现我的值不在 ngx-charts-x轴上,而在< strong> 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

3 个答案:

答案 0 :(得分:0)

我找到了使用 querySelector innerHTML 这样的解决方案:

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

答案 1 :(得分:0)

尝试一下。

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

答案 2 :(得分:0)

您需要此参数[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>