EPR类企业管理系统

在我们现有系统基础上或全新开发,提供定制服务
为您的企业高效快速实施ERP,WMS,MES,CRM管理系统
全面管控物料仓库、销售业务、采购业务、仓库业务
生产过程、质量检验、组织架构、业务报表


定制
QQ:460-3528

开发
QQ群:3360-90194

源码
微信:136-3650-3721

如何:将列表视图显示为图表

用于可视化XAF应用程序中的视图的默认列表编辑器是GridListEditor和ASPxGridListEditor(分别在WinForms和ASP.NET应用程序中使用)。这些默认的列表编辑器将列表视图可视化为网格。本主题演示如何使用“图表模块”提供的功能将“列表视图”可视化为图表。由ChartListEditor和ASPxChartListEditor列表编辑器可视化的列表视图将在应用程序模型中定义。还将演示使用“图表设计器”对“图表”设置进行自定义。

提示

DevExpress代码示例数据库(http://www.devexpress.com/example=E2840)中提供了完整的示例项目。

演示使用图表列表编辑器的示例应用程序的实现包括以下阶段。

提示

您可以在FeatureCenter中查看带有图表列表编辑器的示例,以及XAF随附的XCRM演示。默认情况下,这些演示位于%PUBLIC%\ Documents \ DevExpress演示19.2 \ Components \ eXpressApp Framework文件夹中。

实现示例持久对象

让我们考虑以下Employee持久类或相同的Entity Framework类。

using DevExpress.Persistent.Base;
using DevExpress.Persistent.BaseImpl;
using DevExpress.Xpo;
using System.ComponentModel;
//...
[DefaultClassOptions, DefaultProperty(nameof(FullName)), ImageName("BO_Person")]
public class Employee : BaseObject {
    public Employee(Session session) : base(session) {}
    private string firstName;
    private string lastName;
    private string position;
    [VisibleInListView(false)]
    public string FirstName {
        get { return firstName; }
        set { SetPropertyValue(nameof(FirstName), ref firstName, value); }
    }
    [VisibleInListView(false)]
    public string LastName {
        get { return lastName; }
        set { SetPropertyValue(nameof(LastName), ref lastName, value); }
    }
    [VisibleInDetailView(false)]
    public string FullName {
        get { return String.Format("{0} {1}", FirstName, LastName); }
    }
    public string Position {
        get { return position; }
        set { SetPropertyValue(nameof(Position), ref position, value); }
    }
}
注意

尽管Employee是XPO持久类,但此处演示的方法也可以与Entity Framework一起使用。

在此示例中,我们将创建“雇员”图表,该图表可用于比较具有不同职位的“雇员”数量。

创建一个新的列表视图节点

请按照以下步骤创建“列表视图”节点,该节点定义了要由“图表列表编辑器”可视化的列表视图。

  • 调用模型编辑器平台无关的模块项目
  • 导航到视图| Employee_ListView节点,该节点是为Employee持久对象自动生成的。右键单击它,然后选择克隆

    ChartsCloneNode

    将创建“列表视图”节点的副本。

  • 将新节点的IModelView.Id属性更改为“ Employee_ListView_Chart”。

    ChartsSetNodeId

为图表列表视图创建导航项

上一阶段创建的Employee_ListView_Chart列表视图应由最终用户访问。因此,创建Employee Chart Navigation Item,其IModelNavigationItem.View属性设置为“ Employee_ListView_Chart”。

ChartsNavigationItem

在“将项目添加到导航控件”教程中详细介绍了“导航项目”的创建。

注意

或者,您可以定义一个指向Employee_ListView_Chart列表视图的View Variant。最终用户将能够选择将“员工列表视图”显示为网格还是图表。在为最终用户提供若干变种查看教程演示了如何完成这个任务。图表“列表视图”也可以用作仪表板项目(请参见如何:并排显示多个视图)。

添加图表模块

图表列表编辑器由“图表模块”提供。由于此模块由两个特定于平台的模块项目表示,因此应将它们分别添加到应用程序的WinForms和ASP.NET模块中。

  • 调用WinForms模块项目的模块设计器。将ChartWindowsFormsModule项目从“工具箱”拖到“必需的模块”面板中。

    ChartsAddModuleWin

  • 调用ASP.NET模块项目的模块设计器。将ChartAspNetModule项目从“工具箱”拖到“必需的模块”面板中。

    ChartsAddModuleWeb

更改列表视图的列表编辑器

添加图表模块后,可以使用“列表视图”节点的IModelListView.EditorType属性来指定“图表列表编辑器” 。由于有两个特定于平台的图表列表编辑器,因此应分别更改WinForms和ASP.NET模块项目的设置。

  • 调用WinForms模块项目的模型编辑器。导航到视图| Employee_ListView_Chart节点。在EditorType属性的下拉列表中,选择“ DevExpress.ExpressApp.Chart.Win.ChartListEditor”。

    ChartSetEditorWin

  • 调用ASP.NET模块项目的模型编辑器。导航到视图| Employee_ListView_Chart节点。在EditorType属性的下拉列表中,选择“ DevExpress.ExpressApp.Chart.Web.ASPxChartListEditor”。

    ChartSetEditorWeb

指定图表设置

图表模块使用ChartSettings(IModelChartSettings)子节点扩展“列表视图”节点。要为WinForms应用程序指定图表设置,请为WinForms模块项目调用模型编辑器,然后执行以下步骤。

  • 导航到视图| Employee_ListView_Chart | ChartSettings节点。单击IModelChartSettings.Settings属性值右侧的省略号按钮。

    图表设置

    图表设计表格将被调用。默认情况下,显示带有外观,行为和边框设置的主图表“选项”页面。

  • 单击左上角的添加图表元素AddChartElement)按钮,选择“系列...”元素,然后在调用的窗口中选择条形视图类型。

    ChartsDesigner2

  • 将新系列的Name属性设置为“ Positions”。

    ChartDesigner5

  • 切换到“数据”选项卡。要定义图表数据,请将“位置”数据成员拖到“参数”单元格。

    ChartsDesigner3

  • 切换到“属性”选项卡。在“数据”组中,找到“摘要函数”属性,然后单击右侧的省略号按钮。在调用的窗口中,选择计数,然后单击确定

    ChartsDesigner4

  • 单击“确定”关闭“图表设计器”。XML格式的图表设置将设置为模型编辑器”中的“设置”属性。
注意

最终用户可以在运行时通过右键单击图表并选择“调用向导”来调用图表设计器。您可以通过将ChartSettings节点的ICustomizationEnabledProvider.CustomizationEnabled属性设置为False来关闭此功能。要详细了解Chart Designer功能,请参考Chart Designer帮助主题。

要为ASP.NET应用程序指定图表设置,请调用ASP.NET模块项目的模型编辑器并执行相同的步骤。请注意,ASP.NET应用程序还有另外两个ChartSettings节点属性可用-IModelWebChartSettings.PreferredWidthIModelWebChartSettings.PreferredHeight。在为preferredWidth属性指定以像素为单位的图表的最小可能宽度(图控制自动调整其宽度以适应可用空间)。该PreferredHeight属性指定的确切高度。

运行应用程序

运行WinForms应用程序。创建多个具有不同位置的Employee对象,以为图表提供数据。

ChartsRunWinApp1

选择“员工图表”导航项。该图表将显示。

ChartsRunWinApp2

运行ASP.NET应用程序,并检查“雇员图表”是否也可用。

ChartsRunWebApp2

相关文章

转载保留此链接,注明出处