Angular可视化指南 - 用Kendo UI图表组件创建数据可视化

Kendo UI for Angular是专业级的Angular UI组件库不仅是将其他供应商提供的现有组件封装起来telerik致力于提供纯粹高性能的Angular UI组件而无需任何jQuery依赖关系。无论您是使用TypeScript还是JavaScript开发Angular应用程序Kendo UI for Angular都能为Angular项目提供专业的、企业级UI组件。用Angular构建应用并让用户理解数据的影响并不是一件容易的事我们经常在表格或列表中显示数据但这不够直观使用图表和图形来理解数据能让用户更轻松地理解。本文我们将使用Kendo UI for Angular中的Angular图表组件演示如何创建柱形图、折线图和饼状图来实现数据可视化。什么是Kendo UI图表来自Kendo UI for Angular的Angular Charts组件提供了出色的图形数据可视化包括各种图表类型简单的配置允许为大多数业务案例创建图表和出色的UI。Angular图表有一个广泛的图表列表它被分成了一些模块比如支持主题的ChartModule、SparklineModule和StockChartModule今天我们将介绍ChartModule选项。添加Kendo UI for Angular图表首先创建一个新的Angular应用并添加一些依赖项。打开你的终端使用angular/cli创建一个新项目执行以下命令ng new play-with-kendo-ui-charts接下来在终端中使用ng add progress/ Kendo - Angular - Charts命令在应用中安装Kendo UI for Angular图表它会自动将ChartsModule安装并配置到app.module中。play-with-kendo-ui-charts ng add progress/kendo-angular-chartsℹ Using package manager: npm✔ Found compatible package version: progress/kendo-angular-charts7.3.0.✔ Package information loaded.包progress/kendo-angular-charts7.1.1将被安装和执行。Would you like to proceed? Yes✔ Package successfully installed.UPDATE src/app/app.module.ts (526 bytes)UPDATE package.json (1515 bytes)UPDATE angular.json (3552 bytes)✔ Packages installed successfully.现在我们已经安装和配置好了但在开始之前我们要先概述一下Kendo UI图表中最常见的组件。Kendo UI for Angular图表组件Kendo UI for Angular Chart依赖于一个组件列表为我们的图标提供了一个简单的配置kendo-chart它是基本根元素有助于定义图表或使用内部的其他组件如kendo-chart-legend kendo-chart-title等。kendo-chart-title在图表中显示标题易于自定义颜色字体和更多的选项。kendo-chart-legend显示带有该系列数据的图例。kendo-chart-series将具有不同类型图表的数据控制为数据数组。kendo-chart-series-item它用颜色、线条、空间等来表示项目。添加饼图创建一个新组件my-chart运行如下命令ng g c my-chart我们需要配置三个要点。chartType定义我们使用的图表使用SeriesType赋值为“pie”。data它是一个数组包含名称、值和颜色的对象列表用于chart-series-组件。label它返回系列中每个数据项的标题。typeChart: SeriesType pie; public data [ { name: Angular, value: 75, color: red }, { name: React, value: 15, color: blue }, { name: Svelte, value: 5, color:orange }, ]; public label(args: LegendLabelsContentArgs): string { return ${args.dataItem.name}; }开始使用每个组件并配置数据和值kendo-chart kendo-chart-title colorblack font29pt sans-serif textTop Javascript Framework /kendo-chart-title kendo-chart-legend positiontop/kendo-chart-legend kendo-chart-series kendo-chart-series-item [data]data [labels]{ visible: true, content: label} [type]typeChart categoryFieldname colorFieldcolor fieldvalue /kendo-chart-series-item /kendo-chart-series /kendo-chart更改动态图表为了演示​​​​​​​Kendo UI for Angular 图表组件的灵活性和强大功能将以其他类型的图表(如条形图或线形图)来显示数据。例如我们不需要组件或数据的结构(在大多数情况下)来将饼图转换为条形图或折线图。我们创建了一个带有一些图表类型(直线、饼、条)的下拉列表以便动态更改它使用Angular双向绑定和ngModel指令的强大功能来改变typeChart的值。首先创建带有值列表的选择并使用[(ngModel)]设置属性typeChart。当您更改选择时它更新kendo-chart-series-item的类型输入属性并更新图表类型可视化。div h1Using The Power of Kendo Chart/h1 label fortypeChartSelectorPick Chart select [(ngModel)]typeChart idtypeChartSelector option valuelineLine/option option valuepiePie/option option valuebarBar/option /select /label /div现在我们的图表动态变化看起来像这样使用Kendo UI for Angular图表的好处从大量的图表布局列表中选择。出色的组件和内部API文档。万能的Kendo UI主题。支持Angular 15。