格式化Ngx量规图的值以显示百分比

Question

我必须格式化量规表中间显示的值。我需要五个数据的平均值以百分比形式显示在中间。在文档中它表明使用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
  }
];

仪表中央的预期O / P：38％

相反，量表的中间显示38,340,000：

Answer 1

要格式化中心值，可以使用valueFormatting

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

并在component.ts中定义格式函数。下面是格式化为百分比的代码。

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