ngx-charts-bar-horizontal форматирование меток данных

Я использую ngx-диаграммы, точнее, горизонтальная полоса. Я пытаюсь отформатировать метку данных и добавить% в конце. Я попытался использовать [xAxisTickFormatting], но это не сработало, потому что, как я заметил, мои значения находятся не на ngx-charts-x-axis, а на < strong> ngx-charts-series-horizontal.

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

Итак, что мне делать, чтобы отформатировать метки данных и добавить "%" после значений?

вот моя диаграмма


typescript angular charts ngx-bootstrap ngx-charts
person Sergiu Molnar    schedule 04.04.2019    source источник

Ответы (3)


arrow_upward
5
arrow_downward

Попробуй это.

<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 + '%';
  }
person Sree    schedule 04.11.2019
comment
Работает как шарм, спасибо! - person Kaylo; 18.06.2021

arrow_upward
0
arrow_downward

Я нашел решение, используя querySelector и innerHTML, например:

 document.querySelectorAll(text.textDataLabel).innerHTML += '%';
person Sergiu Molnar    schedule 04.04.2019

arrow_upward
0
arrow_downward

Вам нужен этот параметр [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>
person nektobit    schedule 25.12.2019
comment
Я хочу начать минимальное значение оси Y с 5, использовать [yAxisTickFormatting] и вернуть val +5 в functn, но данные диаграммы не отображаются должным образом .. на 11-м тиковом графике пиковое значение равно 6 ... Также попробовал yScaleMin = 5. ..неправильные данные ... Есть идеи решить эту проблему? - person Shubhro Mukherjee; 02.07.2021