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

Kendo UI for Angular 2024 Q3新版下載

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

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

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

接下來我們將為大家展示一個真實的場景。

場景

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

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

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

設置項目

首先，使用命令ng new listview-charts來設置Angular應用。

ng new listview-charts
cd listview-charts
npm install

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

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

ng add @progress/kendo-angular-charts

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

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

好了，我們可以開始做這個項目了！

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

首先，用您喜歡的編輯器打開項目并復制示例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)在是時候構建Chart Stats組件了！

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

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

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并導入ChartModule來訪問Kendo UI Charts提供的所有組件，將使用類型為column的Kendo UI Chart，它需要三個字段：data、field和category，因此我將添加三個輸入屬性：

• data：提供數(shù)據(jù)數(shù)組
• field：要在Kendo UI Chart組件中綁定的字段
• category：定義圖表中用于類別標簽（例如，用法）的數(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中添加三個組件：kendo-chart， kendo-chart-series和kendo-chart-series-item。

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

<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)品技術交流群：726377843    歡迎一起進群討論