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


    下载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

    <dx-dashboard-control
    style='display: block;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仪表板项目的比例尺中断。

    界面开发控件DevExpress使用教程

    概述:

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

    ChartLineOptionsExtension

    View Extension

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

    界面开发控件DevExpress使用教程

    概述:

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

    DashboardDescriptionExtension

    View Extension

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

    界面开发控件DevExpress使用教程

    概述:

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

    ItemDescriptionExtension

    View Extension

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

    界面开发控件DevExpress使用教程

    概述:

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

    ChartAxisMaxValueExtension

    View Extension

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

    界面开发控件DevExpress使用教程

    概述:

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

    ChartConstantLinesExtension

    View Extension

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

    界面开发控件DevExpress使用教程

    概述:

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

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

  • 相关阅读:
    洛谷 P6295
    洛谷 P4240
    洛谷 P3287
    My rating is 1064.
    洛谷 P5071
    C语言 #include <> 与 #include “” 区别
    C语言 #pragma once
    C语言 typedef 和 define 区别
    C语言 define 定义函数(多行书写)
    C语言 define 定义函数
  • 原文地址:https://www.cnblogs.com/AABBbaby/p/14484695.html
Copyright © 2020-2023  润新知