界面控件Kendo UI for Angular中文教程:如何构建带图表的仪表板?(二)

ops/2024/11/29 0:04:10/

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

在上文中(点击这里回顾>>),我们为大家介绍了本教程适用的场景、项目基本设置、模拟数据等,本文将继续介绍如何显示图表、自定义分页等,欢迎加入社群持续关注产品动态~

Kendo UI for Angular 2024 Q4新版下载

使用@for显示图表

是时候构建仪表板了,打开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;
}

保存更改,然后我们拥有一个带有图表列表的仪表板!

这是一种很好的数据可视化格式,但是缺少一些特性,比如分页、滚动等。

使用@for自定义分页

我们将首先创建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组件

修改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,只用几行代码就能实现相同的功能,甚至更多呢?它将简化诸如滚动、分页甚至突出显示特定元素等任务,从而使我们的工作变得轻松!接下来我们将具体介绍,篇幅有限下期见!


http://www.ppmy.cn/ops/137513.html

相关文章

C++编程库与框架实战——sqlite3数据库

一,SQLite数据库简介 SQLite是可以实现类似于关系型数据库中各种操作的事务性SQL数据库引擎。 SQLite可以为应用程序提供存储于本地的嵌入式数据库,帮助应用程序实现轻量级的数据存储。 SQLite是一个库文件,并不是单独的进程,它可以静态或动态链接到C++应用程序中,然后…

Python编程整理汇总(基础汇总版)

1. 基础语法 1.1 变量与数据类型 整数&#xff1a;a 10 浮点数&#xff1a;b 3.14 字符串&#xff1a;c "Hello, World!" 布尔值&#xff1a;d True 列表&#xff1a;e [1, 2, 3, 4, 5] 元组&#xff1a;f (1, 2, 3) 字典&#xff1a;g {"name&qu…

如何自动下载和更新冰狐智能辅助?

冰狐智能辅助的版本更新非常快&#xff0c;如果设备多的话每次手工更新会非常麻烦&#xff0c;现在分享一种免费的自动下载和安装冰狐智能辅助的方法。 一、安装迅雷浏览器 安装迅雷浏览器1.19.0.4280版本&#xff0c;浏览器用于打开冰狐的官网&#xff0c;以便于从官网下载a…

API设计与开发

7. API设计与开发 API&#xff08;应用程序编程接口&#xff09;是前后端通信的桥梁&#xff0c;良好的API设计能够提升应用的可用性、可维护性和扩展性。以下内容将深入探讨RESTful API原则、GraphQL的基本概念以及使用Postman进行API测试的方法。 7.1 理解RESTful API原则 …

C++设计模式之组合模式在解决层次性问题中的好处

采用组合模式在处理层次型问题时&#xff0c;会带来以下重要好处&#xff1a; 简化客户端操作&#xff1a; 客户端代码可以统一地处理单个对象和组合对象&#xff0c;而无需区分它们。这意味着客户端可以使用相同的操作来对待所有对象&#xff0c;无论它们是简单的叶子节点还是…

数据结构2:顺序表

目录 1.线性表 2.顺序表 2.1概念及结构 2.2接口实现 1.线性表 线性表是n个具有相同特性的数据元素的有限序列。线性表是一种在实际中广泛使用的数据结构&#xff0c;常见的线性表&#xff1a;顺序表、链表、栈、队列、字符串 线性表在逻辑上是线性结构&#xff0c;也就说…

UPLOAD LABS | UPLOAD LABS 靶场初识

关注这个靶场的其它相关笔记&#xff1a;UPLOAD LABS —— 靶场笔记合集-CSDN博客 0x01&#xff1a;UPLOAD LABS 靶场简介 UPLOAD LABS 靶场是一个专门用于学习文件上传漏洞攻击和防御的靶场。它提供了一系列文件上传漏洞的实验环境&#xff0c;用于帮助用户了解文件上传漏洞的…

Redis设计与实现 学习笔记 第二十一章 排序

Redis的SORT命令可以对列表键、集合键、有序集合键的值进行排序。 以下代码展示了SORT命令对列表键进行排序的例子&#xff1a; 以下代码展示了SORT命令使用ALPHA选项&#xff08;ALPHA选项使SORT命令按字典顺序排序&#xff0c;默认SORT命令会将元素当作数字排序&#xff0c…