Infragistics｜Ignite UI for Angular｜IgxDataChart 如何顯示數字軸顯示標籤，每 3 位元以逗號分隔

若要顯示以逗號分隔的數字軸的顯示標籤，並以三位數字分隔，請在軸的 formatLabel 中指定 function。傳遞給函數的第一個參數包含要在軸上顯示的標籤（*對於數字軸，它是數字類型）。根據該標籤的值實作格式化（*您必須自行實作格式化）並傳回格式化的字串作為函數的傳回值。

<!-- app.component.html -->
<igx-data-chart ...>
  ...

  <igx-numeric-y-axis #yAxis
    title="Y" minimumValue="0" maximumValue="10000"
    [formatLabel]="numericAxisFormatLabel">
  </igx-numeric-y-axis>

  ...
</igx-data-chart>

// app.component.ts
import { DecimalPipe } from '@angular/common';
import { Component, LOCALE_ID } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  providers: [
    {provide: LOCALE_ID, useValue: 'ja-JP'},
  ]
})

export class AppComponent {
  // ... (中略) ...
  numericAxisFormatLabel(item) {
    // 3桁区切りで書式化し、返す。
    // ※itemは軸に表示されるラベルが渡されてきます。今回のように数値軸の場合はnumber型です。
    console.log(item);
    var formattedText = new DecimalPipe("ja").transform(item);
    return formattedText;
  }
}

執行結果

Y 軸標籤現在由 3 位數字分隔！