下載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='//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

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

概述：

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

ChartLineOptionsExtension

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

概述：

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

DashboardDescriptionExtension

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

概述：

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

ItemDescriptionExtension

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

概述：

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

ChartAxisMaxValueExtension

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

概述：

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

ChartConstantLinesExtension

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

概述：

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

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