Kendo UI for Angular ListView可以輕松地為客戶端設(shè)置一個(gè)帶有圖表列表的儀表板，包括分頁、按鈕選項(xiàng)、數(shù)字或滾動(dòng)，以及在沒有更多項(xiàng)目要顯示時(shí)的通知等。Kendo UI for Angular是專用于Angular開發(fā)的專業(yè)級(jí)Angular組件。telerik致力于提供純粹的高性能Angular UI組件，無需任何jQuery依賴關(guān)系。

Kendo UI for Angular 2024 Q3新版下載

當(dāng)我們構(gòu)建應(yīng)用程序并希望顯示數(shù)據(jù)列表時(shí)，表格和網(wǎng)格是很好的解決方案。然而有時(shí)也需要一種奇特的定制設(shè)計(jì)來顯示數(shù)據(jù)，對(duì)于那些習(xí)慣Angular的開發(fā)人員來說，最常用的解決方案是使用@for或*ngFor。

@for和*ngFor指令非常強(qiáng)大，使我們能夠遍歷元素列表，并使用自定義的設(shè)計(jì)或組件。這就是我們大多數(shù)人使用它們的主要原因。然而，有時(shí)它們可能會(huì)有點(diǎn)限制。

當(dāng)我們想突出顯示第一個(gè)或最后一個(gè)元素、實(shí)現(xiàn)分頁或添加滾動(dòng)時(shí)，會(huì)發(fā)生什么？在這種情況下，我們必須自己實(shí)現(xiàn)所有這些功能，或者使用一個(gè)快速、簡單和輕松的替代方案。

接下來我們將為大家展示一個(gè)真實(shí)的場景。

場景

我們需要為新客戶創(chuàng)建一個(gè)演示，客戶端希望在帶有圖表列表的儀表板中顯示信息，這些圖表將按country顯示有關(guān)框架使用情況的數(shù)據(jù)。

客戶端希望通過圖表可視化數(shù)據(jù)，但也希望使用分頁、按鈕選項(xiàng)、數(shù)字或滾動(dòng)，并在沒有更多項(xiàng)目要顯示時(shí)通知用戶。還有一件比較重要的事情，客戶想盡快得到demo ！

我們首先想到的是使用Kendo UI for Angular Charts來可視化信息，并將其與@for結(jié)合起來迭代模擬數(shù)據(jù)。有了這個(gè)初步的方法，就可以開始行動(dòng)了！

設(shè)置項(xiàng)目

首先，使用命令ng new listview-charts來設(shè)置Angular應(yīng)用。

ng new listview-charts
cd listview-charts
npm install

（在生成過程中，選擇CSS作為樣式格式，目前拒絕使用SSG/ prerender。）

接下來，通過使用命令來注冊(cè)安裝Kendo UI for Angular Charts：

ng add @progress/kendo-angular-charts

想要充分利用Kendo UI for Angular，下載一個(gè)免費(fèi)試用版，然后通過將Kendo UI license.txt文件復(fù)制到項(xiàng)目中來激活license，并將其重命名為Kendo - UI -license.txt，并運(yùn)行以下命令：

npm install –save @progress/kendo-licensing
npx kendo-ui-license activate

好了，我們可以開始做這個(gè)項(xiàng)目了！

模擬數(shù)據(jù)

首先，用您喜歡的編輯器打開項(xiàng)目并復(fù)制示例data.ts文件到src/app/data/。它包含圖表的模擬示例信息：

export const frameworkUsage = [
{
country: 'France',
data: [
{ framework: 'Angular', usage: 125, color: '#DD0031' },
{ framework: 'Vue', usage: 389, color: '#4FC08D' },
],
},
{
country: 'Canada',
data: [
{ framework: 'React', usage: 421, color: '#61DAFB' },
{ framework: 'Ember', usage: 96, color: '#F05E1B' },
],
},....

我們有了模擬數(shù)據(jù)，現(xiàn)在是時(shí)候構(gòu)建Chart Stats組件了！

創(chuàng)建圖表統(tǒng)計(jì)組件

圖表統(tǒng)計(jì)組件將作為Kendo UI for Angular的封裝器，只需要將數(shù)據(jù)作為輸入傳遞，將其綁定到kendo-chart組件。首先通過在終端運(yùn)行命令ng g c components/chart-stats，使用Angular CLI創(chuàng)建一個(gè)新組件。

ng g c components/chart-stats
CREATE src/app/components/chart-stats/chart-stats.component.css (0 bytes)
CREATE src/app/components/chart-stats/chart-stats.component.html (26 bytes)
CREATE src/app/components/chart-stats/chart-stats.component.spec.ts (621 bytes)
CREATE src/app/components/chart-stats/chart-stats.component.ts (253 bytes)

打開chart-stats.component.ts并導(dǎo)入ChartModule來訪問Kendo UI Charts提供的所有組件，將使用類型為column的Kendo UI Chart，它需要三個(gè)字段：data、field和category，因此我將添加三個(gè)輸入屬性：

• data：提供數(shù)據(jù)數(shù)組
• field：要在Kendo UI Chart組件中綁定的字段
• category：定義圖表中用于類別標(biāo)簽（例如，用法）的數(shù)據(jù)字段。

chart-stats.component.ts中的代碼是這樣的：

import { Component, input } from '@angular/core';
import { ChartModule } from '@progress/kendo-angular-charts';

@Component({
selector: 'app-chart-stats',
standalone: true,
imports: [ChartModule],
templateUrl: './chart-stats.component.html',
styleUrl: './chart-stats.component.css',
})
export class ChartStatsComponent {
data = input<Array<any>>([]);
field = input<string>('field');
category = input<string>('category');
}

打開chart-stats.component.html并從ChartModule中添加三個(gè)組件：kendo-chart， kendo-chart-series和kendo-chart-series-item。

在kendo-chart-series-item中，將類型設(shè)置為列，并將數(shù)據(jù)、字段和類別與信號(hào)屬性綁定。

<kendo-chart>
<kendo-chart-series>
<kendo-chart-series-item
type="column"
[data]="data()"
[field]="category()"
[categoryField]="field()"
>
</kendo-chart-series-item>
</kendo-chart-series>
</kendo-chart>

未完待續(xù)我們下期繼續(xù)，產(chǎn)品咨詢“”了解~

Telerik_KendoUI產(chǎn)品技術(shù)交流群：726377843    歡迎一起進(jìn)群討論