Angular的仪表板组件 - 自定义属性

AABBbaby · 发表于 2021-3-5 10:25:21

下载DevExpress v20.2完整版

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

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

[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

[C#] 纯文本查看 复制代码

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仪表板项目的比例尺中断。

概述：