日韩精品色,在线观看免费污视频,日本午夜视频在线观看

界面控件DevExpress使用教程：Angular的儀表板組件 - 自定義屬性

翻譯|使用教程|編輯：龔雪|2021-03-04 10:41:14.487|閱讀 294 次

概述：DevExpress Dashboard附帶許多導(dǎo)出設(shè)置/自定義選項(xiàng)，在本文中，將為大家介紹Angular的儀表板組件如何自定義屬性。

DevExpress擁有.NET開發(fā)需要的所有平臺(tái)控件，包含600多個(gè)UI控件、報(bào)表平臺(tái)、DevExpress Dashboard eXpressApp 框架、適用于 Visual Studio的CodeRush等一系列輔助工具。

先決條件

平臺(tái)：Business Intelligence
產(chǎn)品：Dashboard for ASP.NET Core

本文演示如何為Web儀表板創(chuàng)建自定義屬性，ASP.NET Core儀表板控件是一個(gè)服務(wù)器應(yīng)用程序，一個(gè)Angular應(yīng)用程序用作客戶端。

運(yùn)行項(xiàng)目

在asp-net-core-dashboard-backend文件夾中，運(yùn)行以下命令：

Code

dotnet run

在dashboard-angular-app文件夾中，運(yùn)行以下命令：

Code

npm i
ng serve --open

概述

自定義屬性以結(jié)構(gòu)化格式存儲(chǔ)在CustomProperties集合中，此集合中的每個(gè)自定義屬性都包含該自定義屬性的元數(shù)據(jù)。

要將自定義屬性值應(yīng)用于儀表板，您需要?jiǎng)?chuàng)建一個(gè)擴(kuò)展。該擴(kuò)展是一個(gè)JavaScript模塊，您可以將其集成到應(yīng)用程序中，提供自定義屬性的每個(gè)擴(kuò)展可以分為以下幾部分：

1. Model

該模型是一個(gè)對象，其中包含屬性名稱、類型和默認(rèn)值。它還指定在哪個(gè)級(jí)別上創(chuàng)建屬性（儀表板、儀表板項(xiàng)目或數(shù)據(jù)項(xiàng)目容器），使用Model.registerCustomProperty屬性注冊自定義屬性定義。

2. Viewer

在此部分中，您將根據(jù)保存的自定義屬性值修改查看器部分，您可以使用客戶端方法和事件來更改顯示的元素。

3. Designer

此部分包含設(shè)計(jì)器設(shè)置，添加編輯器和控件元素以在UI中配置和更改自定義屬性的值。如果在查看器模式下使用擴(kuò)展，則不需要此部分。

4. Event Subscription

這部分包含事件訂閱。

注冊

要注冊擴(kuò)展，請導(dǎo)入擴(kuò)展模塊并在呈現(xiàn)控件之前調(diào)用registerExtension方法：

HTML

<dx-dashboard-control
style='display: block;width:100%;height:800px;'
endpoint='//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));
}
}