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

infragistics log


若要顯示以逗號分隔的數字軸的顯示標籤,並以三位數字分隔,請在軸的 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 位數字分隔!

infragistics






延伸閱讀
aa71435723的大頭照
Winston

Eggplant DAI 自動化測試專家。

留言