翻譯|使用教程|編輯:龔雪|2024-11-26 10:30:50.567|閱讀 96 次
概述:本文主要介紹如何使用Kendo UI for Angular組件的ListView來構建帶有圖表的儀表板,歡迎下載新版控件體驗!
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
Kendo UI for Angular ListView可以輕松地為客戶端設置一個帶有圖表列表的儀表板,包括分頁、按鈕選項、數字或滾動,以及在沒有更多項目要顯示時的通知等。Kendo UI for Angular是專用于Angular開發的專業級Angular組件。telerik致力于提供純粹的高性能Angular UI組件,無需任何jQuery依賴關系。
在上文中(),我們為大家介紹了本教程適用的場景、項目基本設置、模擬數據等,本文將繼續介紹如何顯示圖表、自定義分頁等,歡迎加入社群持續關注產品動態~
Kendo UI for Angular 2024 Q4新版下載
Telerik_KendoUI產品技術交流群:726377843 歡迎一起進群討論
是時候構建儀表板了,打開app.component.ts,在導入部分導入并注冊ChartStatsComponent。由于模擬數據提供了countries的數據使用情況列表,因此聲明一個本地變量countries并使用frameworkUsage模擬數據對其進行設置。
代碼像這樣:
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { frameworkUsage } from './data/data';
import { ChartStatsComponent } from './components/chart-stats/chart-stats.component';
@Component({
selector: 'app-root',
standalone: true,
imports: [RouterOutlet,ChartStatsComponent],
templateUrl: './app.component.html',
styleUrl: './app.component.css',
})
export class AppComponent {
title = 'listview-charts';
countries = frameworkUsage;
}
接下來,打開app.component.html并使用app-chart-stats組件顯示每個country的圖表。您可以使用Angular @for指令來循環遍歷countries數組,并將數據綁定到app-chart-stats組件。
在*@for中,添加一個帶有country類的新div,并使用插值來綁定country.country以顯示名稱。
app.component.html中的代碼是這樣的:
@for (country of countries; track country) {
<div class="country">
<h2>{{ country.country }}</h2>
<app-chart-stats
[data]="country.data"
field="framework"
category="usage"
/>
</div>
}
現在儀表板設置為使用ChartStatsComponent顯示每個country 的圖表。
打開styles.css,添加.country CSS類,并使用以下CSS規則:
.country {
border: 1px solid black;
margin: 1rem;
padding: 1rem;
}
保存更改,然后我們擁有一個帶有圖表列表的儀表板!
 
 
這是一種很好的數據可視化格式,但是缺少一些特性,比如分頁、滾動等。
我們將首先創建pagination.service來處理分頁邏輯,分頁服務將根據當前頁面和頁面大小計算應該顯示哪些項。
首先,運行以下命令在Angular CLI中生成:
	ng g s services/pagination
 CREATE src/app/services/pagination.service.spec.ts (377 bytes)
 CREATE src/app/services/pagination.service.ts (139 bytes)
創建一個接口來定義分頁結果的結構,該界面包括當前頁面的條目、條目總數、當前頁數和總頁數。
為了節省時間,我們將提供PaginationResult接口,打開src/app/services/pagination.service.ts并粘貼到文件中。
export interface PaginationResult {
items: T[];
totalItems: number;
currentPage: number;
totalPages: number;
}
在同一個文件(pagination.service.ts) 中,在PaginationService類中實現這個功能。在此服務中,我們將提供一個名為paginateData的方法,該方法根據當前頁面和頁面大小對數據數組進行切片,然后返回經過分頁的結果。
@Injectable({ providedIn: 'root' })
export class PaginationService {
paginateData(data: any, page: number, pageSize: number): PaginationResult {
const totalItems = data.length;
const totalPages = Math.ceil(totalItems / pageSize);
const startIndex = (page - 1) * pageSize;
const endIndex = Math.min(startIndex + pageSize, totalItems);
return {
items: data.slice(startIndex, endIndex),
totalItems,
currentPage: page,
totalPages,
};
}
}
下一步是在app.component.ts中使用pagination.service,讓我們開始吧!
修改app.component.ts,首先注入PaginationService來處理分頁。因為我們需要持續跟蹤所有數據,并且只提供當前頁面中的項,所以必須拆分數據。
將模擬數據存儲在一個名為dataServer的新變量中:
export class AppComponent implements OnInit {
dataServer = frameworkUsage;
注意,我們正在這個組件上實現OnInit(很快就會用到),一定要把它添加到組件頂部@angular/core的OnInit導入中。
接下來,用一個空數組初始化countries,并配置pageSize和currentPage。
countries: any = []; currentPage = 1; pageSize = 3;
創建一個新方法bindData(),將配置和數據發送到分頁服務,并返回paginationResult對象,將條目綁定到countries變量。
bindData() {
const paginatedResult = this.paginationService.paginateData(
this.dataServer,
this.currentPage,
this.pageSize,
);
this.countries = paginatedResult.items;
}
實現ngOnInit生命周期hooks來綁定初始數據。
ngOnInit(): void {
this.bindData();
}
為了在頁面之間移動,我們創建了一個新方法nextPage(),它增加currentPage值并減少prevPage,然后再次調用bindData()方法。
nextPage() {
this.currentPage = this.currentPage + 1;
this.bindData();
}
app.component.ts代碼中的最終代碼如下:
export class AppComponent implements OnInit {
dataServer = frameworkUsage;
countries: any = [];
currentPage = 1;
pageSize = 3;
paginationService = inject(PaginationService);
ngOnInit(): void {
this.bindData();
}
bindData() {
const paginatedResult = this.paginationService.paginateData(
this.dataServer,
this.currentPage,
this.pageSize,
);
this.countries = paginatedResult.items;
}
prevPage() {
this.currentPage = this.currentPage - 1;
this.bindData();
}
nextPage() {
this.currentPage = this.currentPage + 1;
this.bindData();
}
}
分頁的最后一步是打開app.component.html,添加兩個按鈕,prev 和 next。在next按鈕中,將click事件綁定到nextPage函數:
<button (click)="prevPage()">next</button>
<button (click)="nextPage()">next</button>
@for (country of countries; track country) {
<div class="country">
<h2>{{ country.country }}</h2>
<app-chart-stats
[data]="country.data"
field="framework"
category="usage"
/>
</div>
}
 
 
我們才剛剛開始分頁,為什么不采取快捷方式,通過切換到Kendo UI for Angular ListView,只用幾行代碼就能實現相同的功能,甚至更多呢?它將簡化諸如滾動、分頁甚至突出顯示特定元素等任務,從而使我們的工作變得輕松!接下來我們將具體介紹,篇幅有限下期見!
未完待續我們下期繼續,產品咨詢“”了解~
本站文章除注明轉載外,均為本站原創或翻譯。歡迎任何形式的轉載,但請務必注明出處、不得修改原文相關鏈接,如果存在內容上的異議請郵件反饋至chenjj@ke049m.cn
文章轉載自:慧都網