欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

如何开发Angular应用的仪表板功能?这里有答案 DevExpressAngular仪表板 

程序员文章站 2022-06-01 22:00:16
...

下载DevExpress v20.2完整版    DevExpress v20.2汉化资源获取

DevExpress拥有.NET开发需要的所有平台控件,包含600多个UI控件、报表平台、DevExpress Dashboard eXpressApp 框架、适用于 Visual Studio的CodeRush等一系列辅助工具。

先决条件
  • 平台:Business Intelligence
  • 产品:Dashboard for ASP.NET Core

本文演示如何为Web仪表板创建自定义属性,ASP.NET Core仪表板控件是一个服务器应用程序,一个Angular应用程序用作客户端。

运行项目

在asp-net-core-dashboard-backend文件夹中,运行以下命令:

Code

dotnet run

在dashboard-angular-app文件夹中,运行以下命令:

Code

npm i
ng serve --open

概述

自定义属性以结构化格式存储在CustomProperties集合中,此集合中的每个自定义属性都包含该自定义属性的元数据。

要将自定义属性值应用于仪表板,您需要创建一个扩展。 该扩展是一个JavaScript模块,您可以将其集成到应用程序中,提供自定义属性的每个扩展可以分为以下几部分:

1. Model

该模型是一个对象,其中包含属性名称、类型和默认值。它还指定在哪个级别上创建属性(仪表板、仪表板项目或数据项目容器),使用Model.registerCustomProperty属性注册自定义属性定义。

2. Viewer

在此部分中,您将根据保存的自定义属性值修改查看器部分,您可以使用客户端方法和事件来更改显示的元素。

3. Designer

此部分包含设计器设置,添加编辑器和控件元素以在UI中配置和更改自定义属性的值。如果在查看器模式下使用扩展,则不需要此部分。

4. Event Subscription

这部分包含事件订阅。

注册

要注册扩展,请导入扩展模块并在呈现控件之前调用registerExtension方法:

HTML

 

<dx-dashboard-control
style='display: block;width:100%;height:800px;'
endpoint='http://localhost:5000/api'
workingMode='Designer'
(onBeforeRender)='onBeforeRender($event)'
>
</dx-dashboard-control>

 

TypeScript

 

import { DashboardControl, DashboardControlArgs } from 'devexpress-dashboard';
import { ChartScaleBreaksExtension } from './extensions/chart-scale-breaks-extension';
import { ChartLineOptionsExtension } from './extensions/chart-line-options-extension';
import { ChartAxisMaxValueExtension } from './extensions/chart-axis-max-value-extension';
import { ChartConstantLinesExtension } from './extensions/chart-constant-lines-extension';
import { ItemDescriptionExtension } from './extensions/item-description-extension';
import { DashboardDescriptionExtension } from './extensions/dashboard-description-extension';

// ...

export class AppComponent {
title = 'dashboard-angular-app';

onBeforeRender(args: DashboardControlArgs) {
var dashboardControl = args.component;
dashboardControl.registerExtension(new ChartScaleBreaksExtension(dashboardControl));
dashboardControl.registerExtension(new ChartLineOptionsExtension(dashboardControl));
dashboardControl.registerExtension(new ChartAxisMaxValueExtension(dashboardControl));
dashboardControl.registerExtension(new ChartConstantLinesExtension(dashboardControl));
dashboardControl.registerExtension(new ItemDescriptionExtension(dashboardControl));
dashboardControl.registerExtension(new DashboardDescriptionExtension(dashboardControl));
}
}

 

示例结构

下面的示例包含一组展示不同功能的自定义属性。 在下面,您可以找到每个扩展的详细说明。

ChartScaleBreaksExtension

View Extension

此扩展启用或禁用Chart仪表板项目的比例尺中断。

如何开发Angular应用的仪表板功能?这里有答案
            
    
    
        DevExpressAngular仪表板 

概述:

  • 为特定的仪表板项目(图表)添加自定义布尔属性。
  • 使用CheckBox 小部件作为编辑器,将Scale breaks (Custom)部分集成到Options菜单中。

ChartLineOptionsExtension

View Extension

此扩展名更改Chart仪表板项目中每个系列线的破折号样式。

如何开发Angular应用的仪表板功能?这里有答案
            
    
    
        DevExpressAngular仪表板 

概述:

  • 为特定数据项容器(图表系列)添加字符串自定义属性。
  • 使用SelectBox小部件作为编辑器,将Line Options (Custom)部分集成到数据项菜单中。

DashboardDescriptionExtension

View Extension

此扩展使您可以在仪表板菜单中设置仪表板的描述,当您将鼠标悬停在仪表板标题中的信息按钮上时,将显示仪表板描述。

如何开发Angular应用的仪表板功能?这里有答案
            
    
    
        DevExpressAngular仪表板 

概述:

  • 为仪表板添加自定义字符串属性。
  • 显示如何向工具箱添加新项目,在本示例中新项目被添加到仪表板菜单。
  • 演示如何使用模板创建复杂的编辑器,在此示例中,它是其中包含TextArea和Button小部件的小部件。

ItemDescriptionExtension

View Extension

通过此扩展,您可以为每个仪表板项目设置描述。 当您将鼠标悬停在项目标题上的信息按钮上时,将显示仪表板项目说明。

如何开发Angular应用的仪表板功能?这里有答案
            
    
    
        DevExpressAngular仪表板 

概述:

  • 为每个仪表板项目添加一个自定义字符串属性。
  • 使用预定义的buttonGroup模板将Description (Custom)部分集成到Options菜单中。
  • 显示如何根据自定义属性的值启用或禁用编辑器。

ChartAxisMaxValueExtension

View Extension

此扩展名使您可以更改Chart项目中的Y轴最大值。

如何开发Angular应用的仪表板功能?这里有答案
            
    
    
        DevExpressAngular仪表板 

概述:

  • 为特定的仪表板项目(图表)添加一组具有不同类型(数字、布尔值和字符串)的自定义属性。
  • 演示如何将自定义属性绑定到数据项列表。
  • 显示如何根据自定义属性的值启用或禁用编辑器。

ChartConstantLinesExtension

View Extension

此扩展为Chart仪表板项目绘制恒定线。

如何开发Angular应用的仪表板功能?这里有答案
            
    
    
        DevExpressAngular仪表板 

概述:

  • 为特定的仪表板项目(图表)添加复杂的自定义属性。
  • 显示如何使用保存为数组的复杂自定义值。
  • 演示如何将自定义属性绑定到数据项列表。
  • 自定义导出以在导出的文档中显示结果。

上DevExpress中文网,获取第一手最新产品资讯!

 

DevExpress技术交流群3:700924826      欢迎一起进群讨论