界面控件Kendo UI for Angular中文教程：如何构建带图表的仪表板？（一）

Kendo UI for Angular ListView可以轻松地为客户端设置一个带有图表列表的仪表板，包括分页、按钮选项、数字或滚动，以及在没有更多项目要显示时的通知等。**Kendo UI for Angular**是专用于Angular开发的专业级Angular组件。telerik致力于提供纯粹的高性能Angular UI组件，无需任何jQuery依赖关系。

Kendo UI for Angular 2024 Q3新版下载

当我们构建应用程序并希望显示数据列表时，表格和网格是很好的解决方案。然而有时也需要一种奇特的定制设计来显示数据，对于那些习惯Angular的开发人员来说，最常用的解决方案是使用@for或*ngFor。

@for和*ngFor指令非常强大，使我们能够遍历元素列表，并使用自定义的设计或组件。这就是我们大多数人使用它们的主要原因。然而，有时它们可能会有点限制。

当我们想突出显示第一个或最后一个元素、实现分页或添加滚动时，会发生什么？在这种情况下，我们必须自己实现所有这些功能，或者使用一个快速、简单和轻松的替代方案。

接下来我们将为大家展示一个真实的场景。

场景

我们需要为新客户创建一个演示，客户端希望在带有图表列表的仪表板中显示信息，这些图表将按country显示有关框架使用情况的数据。

客户端希望通过图表可视化数据，但也希望使用分页、按钮选项、数字或滚动，并在没有更多项目要显示时通知用户。还有一件比较重要的事情，客户想尽快得到demo ！

我们首先想到的是使用Kendo UI for Angular Charts来可视化信息，并将其与@for结合起来迭代模拟数据。有了这个初步的方法，就可以开始行动了！

设置项目

首先，使用命令ng new listview-charts来设置Angular应用。

TypeScript 复制代码

ng new listview-charts
cd listview-charts
npm install

（在生成过程中，选择CSS作为样式格式，目前拒绝使用SSG/ prerender。）

接下来，通过使用命令来注册安装Kendo UI for Angular Charts：

TypeScript 复制代码

ng add @progress/kendo-angular-charts

想要充分利用Kendo UI for Angular，下载一个免费试用版，然后通过将Kendo UI license.txt文件复制到项目中来激活license，并将其重命名为Kendo - UI -license.txt，并运行以下命令：

TypeScript 复制代码

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

好了，我们可以开始做这个项目了！

模拟数据

首先，用您喜欢的编辑器打开项目并复制示例data.ts文件到src/app/data/。它包含图表的模拟示例信息：

TypeScript 复制代码

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' },
],
},....

我们有了模拟数据，现在是时候构建Chart Stats组件了！

创建图表统计组件

图表统计组件将作为Kendo UI for Angular的封装器，只需要将数据作为输入传递，将其绑定到kendo-chart组件。首先通过在终端运行命令ng g c components/chart-stats，使用Angular CLI创建一个新组件。

TypeScript 复制代码

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：提供数据数组
field：要在Kendo UI Chart组件中绑定的字段
category：定义图表中用于类别标签（例如，用法）的数据字段。

chart-stats.component.ts中的代码是这样的：

TypeScript 复制代码

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中，将类型设置为列，并将数据、字段和类别与信号属性绑定。

XML 复制代码

<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>