UI组件库Kendo UI for Angular入门指南教程 - 图表功能配置 Kendo UIUI组件telerikAngular
程序员文章站
2022-06-03 22:01:16
...
Kendo UI for Angular图表提供了一组配置选项,使您能够指定其操作。
该图表使您能够:
- 使用配置组件;
- 使用内联选项;
- 通过 Angular 结构指令构建配置组件
配置组件
Chart 提供了配置组件,例如 kendo-chart-series,它允许您:
- 自定义单个图表元素的外观
- 显示不同类型的数据系列
- 绑定到您组件提供的数据
内联选项
除了使用配置组件之外,Chart 还接受配置属性作为普通对象。 因此,数据的表示更加紧凑,适用于在整个应用程序生命周期中持续存在的设置。
配置组件和内联选项提供了混合和匹配它们的选项。
注意:配置组件和内联选项更新同一个内部存储,如果一个属性是通过使用它们两者来配置的,那么配置组件将优先于 inline 选项。
以下示例演示仅考虑 kendo-chart-series 组件。
@Component({ selector: 'my-app', template: ` <kendo-chart [title]="chartTitle" [series]="chartSeries"> <kendo-chart-series> <kendo-chart-series-item [data]="[5, 3, 2, 1]"> </kendo-chart-series-item> </kendo-chart-series> </kendo-chart> ` }) class AppComponent { public chartSeries: any[] = [{ data: [1, 2, 3, 5] }]; public chartTitle: any = { text: 'Sample Chart' }; }
结构指令
您可以使用 Angular 结构指令构建配置组件。
以下示例演示了如何切换单个系列的可见性。
@Component({ selector: 'my-app', template: ` <button (click)="toggleSeries()">Toggle second series</button> <kendo-chart [transitions]="showTransitions"> <kendo-chart-series> <kendo-chart-series-item [data]="[1, 2, 3, 5]"> </kendo-chart-series-item> <kendo-chart-series-item [data]="[5, 3, 2, 1]" *ngIf="showSeries"> </kendo-chart-series-item> </kendo-chart-series> </kendo-chart> ` }) class AppComponent { public showSeries: boolean = false; public showTransitions: boolean = true; public toggleSeries() { this.showSeries = !this.showSeries; this.showTransitions = false; } }
另一个常见的场景是从存储在组件中的视图模型构建系列。
以下示例演示了如何使用 ngFor 指令。
@Component({ selector: 'my-app', template: ` <button (click)="addSeries()">Add series</button> <kendo-chart [transitions]="false"> <kendo-chart-series> <kendo-chart-series-item *ngFor="let series of model" [name]="series.name" [data]="series.data"> </kendo-chart-series-item> </kendo-chart-series> </kendo-chart> ` }) class AppComponent { public showSeries: boolean = false; public model = []; public addSeries() { this.model.push({ name: `Series #${this.model.length + 1}`, data: [ Math.random(), Math.random(), Math.random() ] }); } }
框架以通常的方式检测和应用对组件状态所做的所有更改。
Kendo UI for Angular是Kendo UI系列商业产品的最新产品。Kendo UI for Angular是专用于Angular开发的专业级Angular组件。telerik致力于提供纯粹的高性能Angular UI组件,无需任何jQuery依赖关系。
上一篇: npm设置代理
推荐阅读
-
UI组件库Kendo UI for Angular入门指南教程 - Button(按钮) Kendo UIAngularHTML5javascript
-
UI组件库Kendo UI for Angular入门 - 如何开始使用图表功能 Kendo UIAngular图表功能UI 库
-
UI组件库Kendo UI for Angular入门指南教程 - 图表功能配置 Kendo UIUI组件telerikAngular
-
UI组件库Kendo UI for Angular入门指南教程 - 图表功能配置 Kendo UIUI组件telerikAngular
-
UI组件库Kendo UI for Angular入门 - 如何开始使用图表功能 Kendo UIAngular图表功能UI 库
-
UI组件库Kendo UI for Angular入门指南教程 - 图表功能 AngularKendo UItelerik
-
UI组件库Kendo UI for Angular入门指南 - 图表的平移和缩放 AngularKendo UItelerikjavascript
-
UI组件库Kendo UI for Angular入门指南 - 图表的渲染模式 UIKendo UIAngulartelerik
-
UI组件库Kendo UI for Angular入门指南 - 图表的渲染模式 UIKendo UIAngulartelerik
-
UI组件库Kendo UI for Angular入门指南教程 - Button(按钮) Kendo UIAngularHTML5javascript