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

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

КОД HTML:

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

КОД ДАННЫХ TS:

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
  }
];

Ожидаемый результативность в середине шкалы: 38%

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


angular ngx-charts
person Karthik    schedule 07.05.2020    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Функция, назначенная входу [valueFormatting], указанная в ответе ниже, передает только уже рассчитанную сумму отображаемых данных. Функция, вероятно, предназначена просто для переформатирования этого значения, например, для добавления знака% или формата в качестве валюты. Но значение данных, переданное назначенной функции, можно игнорировать. Затем назначенная функция может напрямую обращаться к объекту входных данных и выполнять вычисление, чтобы вернуть любую агрегатную функцию для требуемых данных. Извините, что не раскрываю детали функции; Это будет вопрос перебора значений в объекте данных и выполнения вычисления суммы или среднего значения и т. Д. С использованием всех значений в определенной группировке. Удачи.

ps эта ссылка может помочь понять, как назначается функция (аналогичный случай в NGX-Charts для форматирования отметок оси. https://github.com/swimlane/ngx-charts/issues/51

person Simon G Andrews    schedule 15.09.2020

arrow_upward
-1
arrow_downward

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

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

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

format(data) {
    return data + '%';
  }
person ScaR    schedule 14.05.2020