文章分類/

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

94 瀏覽人次
2023-12-01 更新

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

快速跳轉目錄

✦ 群昱 AccessSoft 你的全面軟體解決方案 ✦

身為全球眾多知名軟體在台灣合作夥伴,歡迎諮詢你需要的軟體服務!

Picture of 軟體專家
軟體專家

群昱作為全球知名軟體推薦合作夥伴,致力於提供更多軟體解決方案給你!

更多軟體新知

立即詢價

請留下完整資訊,以便我們提供精確的服務內容給你。

詢價資訊