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