Отформатируйте значение диаграммы датчика Ngx для отображения в процентах

Question

Мне нужно отформатировать значение, отображаемое в середине диаграммы. Мне нужно, чтобы среднее значение пяти данных отображалось посередине в процентах. В документации показано, что с помощью valueFormatting мы можем форматировать значение. Может ли кто-нибудь объяснить, как использовать функцию valueFormatting? Я приложил код HTML, данные для графика и снимок графика.

HTML КОД:

<ngx-charts-gauge [view]="view3" [results]="avgTotScreentimeApp"></ngx-charts-gauge>

TS DATA КОД:

export var single = [
  {
    "name": "Germany",
    "value": 10
  },
  {
    "name": "USA",
    "value": 10
  },
  {
    "name": "France",
    "value": 20
  },
  {
    "name": "UK",
    "value": 60
  },
  {
    "name": "Italy",
    "value": 50
  },
  {
    "name": "Spain",
    "value": 40
  }
];

Ожидаемый O / P в середине шкалы : 38%

Вместо этого датчик показывает 38 340000 в центре:

Answer 1

Для форматирования центрального значения вы можете использовать valueFormatting

<ngx-charts-gauge [results]="single" [valueFormatting]="format"></ngx-charts-gauge>

И определить функцию форматирования в вашем component.ts. Ниже приведен код для форматирования в процентах.

format(data) {
    return data + '%';
  }