下載DevExpress v20.2完整版    DevExpress v20.2漢化資源獲取

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

先決條件

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

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

運行項目

在asp-net-core-dashboard-backend文件夾中，運行以下命令：

Code

dotnet run

在dashboard-angular-app文件夾中，運行以下命令：

Code

npm i
ng serve --open

概述

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

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

1. Model

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

2. Viewer

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

3. Designer

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

4. Event Subscription

這部分包含事件訂閱。

注冊

要注冊擴展，請導(dǎo)入擴展模塊并在呈現(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));
}
}

示例結(jié)構(gòu)

下面的示例包含一組展示不同功能的自定義屬性。 在下面，您可以找到每個擴展的詳細(xì)說明。

ChartScaleBreaksExtension

此擴展啟用或禁用Chart儀表板項目的比例尺中斷。

概述：

• 為特定的儀表板項目（圖表）添加自定義布爾屬性。
• 使用 小部件作為編輯器，將Scale breaks (Custom)部分集成到Options菜單中。

ChartLineOptionsExtension

此擴展名更改Chart儀表板項目中每個系列線的破折號樣式。

概述：

• 為特定數(shù)據(jù)項容器（圖表系列）添加字符串自定義屬性。
• 使用SelectBox小部件作為編輯器，將Line Options (Custom)部分集成到數(shù)據(jù)項菜單中。

DashboardDescriptionExtension

此擴展使您可以在儀表板菜單中設(shè)置儀表板的描述，當(dāng)您將鼠標(biāo)懸停在儀表板標(biāo)題中的信息按鈕上時，將顯示儀表板描述。

概述：

• 為儀表板添加自定義字符串屬性。
• 顯示如何向工具箱添加新項目，在本示例中新項目被添加到儀表板菜單。
• 演示如何使用模板創(chuàng)建復(fù)雜的編輯器，在此示例中，它是其中包含TextArea和Button小部件的小部件。

ItemDescriptionExtension

通過此擴展，您可以為每個儀表板項目設(shè)置描述。 當(dāng)您將鼠標(biāo)懸停在項目標(biāo)題上的信息按鈕上時，將顯示儀表板項目說明。

概述：

• 為每個儀表板項目添加一個自定義字符串屬性。
• 使用預(yù)定義的模板將Description (Custom)部分集成到Options菜單中。
• 顯示如何根據(jù)自定義屬性的值啟用或禁用編輯器。

ChartAxisMaxValueExtension

此擴展名使您可以更改Chart項目中的Y軸最大值。

概述：

• 為特定的儀表板項目（圖表）添加一組具有不同類型（數(shù)字、布爾值和字符串）的自定義屬性。
• 演示如何將自定義屬性綁定到數(shù)據(jù)項列表。
• 顯示如何根據(jù)自定義屬性的值啟用或禁用編輯器。

ChartConstantLinesExtension

此擴展為Chart儀表板項目繪制恒定線。

概述：

• 為特定的儀表板項目（圖表）添加復(fù)雜的自定義屬性。
• 顯示如何使用保存為數(shù)組的復(fù)雜自定義值。
• 演示如何將自定義屬性綁定到數(shù)據(jù)項列表。
• 自定義導(dǎo)出以在導(dǎo)出的文檔中顯示結(jié)果。

DevExpress技術(shù)交流群3：700924826      歡迎一起進群討論