How to: Display a List View as a Chart 如何：将列表视图显示为图表

The default List Editors used to visualize Views in XAF applications are GridListEditor and ASPxGridListEditor (used in WinForms and ASP.NET applications, respectively). These default List Editors visualize List Views as grids. This topic demonstrates how to visualize a List View as a chart, using capabilities provided by the Chart Module. The List View, visualized by the ChartListEditor and ASPxChartListEditor List Editors will be defined in the Application Model. Customizations of the Chart settings using the Chart Designer will also be demonstrated.

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

Tip 提示

A complete sample project is available in the DevExpress Code Examples database at http://www.devexpress.com/example=E2840

完整的示例项目可在 DevExpress 代码示例数据库中找到，http://www.devexpress.com/example=E2840

.

The implementation of the sample application demonstrating the use of Chart List Editors is comprised of the following stages.

• Implement Sample Persistent Object
• Create a New List View Node
• Create the Navigation Item for the Chart List View
• Add the Chart Module
• Change the List View's List Editor
• Specify Chart Settings
• Run the Application

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

• 实现示例持久对象
• 创建新的列表视图节点
• 为图表列表视图创建导航项
• 添加图表模块
• 更改列表视图的列表编辑器
• 指定图表设置
• 运行应用程序

Tip 提示

You can see examples with Chart List Editors in the FeatureCenter and XCRM demos shipped with XAF. These demos are located in the %PUBLIC%DocumentsDevExpress Demos 19.2ComponentseXpressApp Framework folder, by default.

您可以在功能中心以及 XAF 附带的 XCRM 演示中查看图表列表编辑器的示例。这些演示位于%PUBLIC%DocumentsDevExpress Demos 19.2ComponentseXpressApp Framework folder, by default.

Implement Sample Persistent Object

实现示例持久对象

Let us consider the following Employee persistent class or same Entity Framework class.

让我们考虑以下员工持久性类或相同的实体框架类。

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); }
    }
}

Note 注意

Although the Employee is an XPO persistent class, the approach demonstrated here can be used with Entity Framework too.

尽管员工是 XPO 持久性类，但此处演示的方法也可以与实体框架一起使用。

In this example, we will create the Employee chart, which can be used to compare quantities of Employees with different Positions.

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

Create a New List View Node

创建新的列表视图节点

Follow the steps below to create a List View node, which defines a List View to be visualized by a Chart List Editor.

• Invoke the Model Editor for the platform-agnostic module project.

• Navigate to the Views | Employee_ListView node, which is auto-generated for the Employee persistent object. Right-click it and select Clone.

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

• 调用与平台无关的模块项目的模型编辑器。

• 导航到视图 |Employee_ListView节点，该节点是为员工持久对象自动生成的。右键单击它并选择"克隆"。

A copy of the List View node will be created.

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

• Change the new node's IModelView.Id property to "Employee_ListView_Chart".

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

  

Create the Navigation Item for the Chart List View

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

The Employee_ListView_Chart List View created at the previous stage, should be accessible by end-users. So, create the Employee Chart Navigation Item, which has the IModelNavigationItem.View property set to "Employee_ListView_Chart".

Employee_ListView_Chart列表视图在上一阶段创建的，最终用户应可访问该视图。因此，创建员工图表导航项，其属性设置为"Employee_ListView_Chart"。

The creation of Navigation Items is detailed in the Add an Item to the Navigation Control tutorial.

导航项的创建在"向导航控制添加项"教程中详细说明。

Note 注意

Alternatively, you can define a View Variant pointing to the Employee_ListView_Chart List View. End-users will be able to choose whether to display the Employee List View as a grid or as a chart. The Provide Several View Variants for End-Users tutorial illustrates how to accomplish this task. The chart List View can also be used as a Dashboard Item (see How to: Display Several Views Side-by-Side).

或者，您可以定义指向Employee_ListView_Chart列表视图的视图变体。最终用户将能够选择是将员工列表视图显示为网格还是图表。"为最终用户提供多个视图变体"教程说明了如何完成此任务。图表列表视图也可以用作仪表板项（请参阅如何：并排显示多个视图）。

Add the Chart Module

添加图表模块

Chart List Editors are provided by the Chart Module. As this module is represented by two platform-specific module projects, you should add them separately to your application's WinForms and ASP.NET modules.

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

• Invoke the Module Designer for the WinForms module project. Drag the ChartWindowsFormsModule item from the Toolbox to the Required Modules panel.

• 调用 WinForms 模块项目的模块设计器。将图表窗口窗体模块项目从"工具箱"拖动到"必需模块"面板。

  

• Invoke the Module Designer for the ASP.NET module project. Drag the ChartAspNetModule item from the Toolbox to the Required Modules panel.

• 调用ASP.NET模块项目的模块设计器。将 ChartAspNet 模块项目从"工具箱"拖动到"必需模块"面板。

  

Change the List View's List Editor

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

After the Chart Module is added, the Chart List Editor can be specified using the List View node's IModelListView.EditorType property. As there are two platform-specific Chart List Editors, you should change settings separately for the WinForms and ASP.NET module projects.

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

• Invoke the Model Editor for the WinForms module project. Navigate to the Views | Employee_ListView_Chart node. In the EditorType property's drop-down, select "DevExpress.ExpressApp.Chart.Win.ChartListEditor".

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

  

• Invoke the Model Editor for the ASP.NET module project. Navigate to the Views | Employee_ListView_Chart node. In the EditorType property's drop-down, select "DevExpress.ExpressApp.Chart.Web.ASPxChartListEditor".

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

  

Specify Chart Settings

指定图表设置

The Chart Module extends List View nodes with the ChartSettings (IModelChartSettings) child node. To specify chart settings for the WinForms application, invoke the Model Editor for the WinForms module project and perform the following steps.

图表模块使用图表设置 （IModelChartSettings） 子节点扩展列表视图节点。要为 WinForms 应用程序指定图表设置，请调用 WinForms 模块项目的模型编辑器，并执行以下步骤。

• Navigate to the Views | Employee_ListView_Chart | ChartSettings node. Click the ellipsis button to the right of the IModelChartSettings.Settings property value.

• 导航到视图 |Employee_ListView_Chart |图表设置节点。单击 IModelChartSettings 右侧的省略号按钮。

The Chart Designer form will be invoked. By default, main chart Options page with appearance, behavior and border settings is shown.

将调用图表设计器窗体。默认情况下，将显示具有外观、行为和边框设置的主图表选项页。

• Click the Add Chart Element ( ) button in the top left corner, choose "Series..." element and the Bar view type in the invoked window.

• 单击左上角的"添加图表元素（AddChartElement）"按钮，在调用的窗口中选择"系列..."元素和条形视图类型。

  

• Set the new series Name property to "Positions".

• 将新系列名称属性设置为"位置"。

  

• Switch to the Data tab. To define chart data, drag the Position data member to the Argument cell.

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

  

• Switch to the Properties tab. In the Data group, find the Summary Function property and click the ellipsis button on the right. In the invoked window, choose Count and click OK.

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

  

• Click OK to close the Chart Designer. The chart settings in XML format will be set to the Settings property in the Model Editor.
• 单击"确定"以关闭图表设计器。XML 格式的图表设置将设置为模型编辑器中的"设置"属性。

Note  注意

End-users can invoke the Chart Designer at run-time by right-clicking a chart and selecting Invoke Wizard. You can turn this feature off by setting the ChartSettings node's ICustomizationEnabledProvider.CustomizationEnabled property to False. To learn about the Chart Designer capabilities in detail, refer to the Chart Designer help topic.

最终用户可以通过右键单击图表并选择"调用向导"来在运行时调用图表设计器。您可以通过将 ChartSettings 节点的 ICustomization 启用提供程序关闭此功能。要详细了解图表设计器功能，请参阅图表设计器帮助主题。

To specify chart settings for the ASP.NET application, invoke the Model Editor for the ASP.NET module project and perform the same steps. Note that there are two additional ChartSettings node's properties available for the ASP.NET application - IModelWebChartSettings.PreferredWidth and IModelWebChartSettings.PreferredHeight. The PreferredWidth property specifies the minimal possible width of a chart in pixels (chart control adjusts its width automatically to fit available space). The PreferredHeight property specifies the exact height.

要为ASP.NET应用程序指定图表设置，请调用ASP.NET模块项目的模型编辑器并执行相同的步骤。请注意，有两个额外的图表设置节点的属性可用于ASP.NET应用程序 - IModelWebChartSettings.首选宽度和IModelWebChart设置。首选高度。"首选宽度"属性指定图表的最小可能宽度（以像素为单位（图表控件会自动调整其宽度以适合可用空间）。"首选高度"属性指定确切的高度。

Run the Application

运行应用程序

Run the WinForms application. Create several Employee objects with different positions to provide data for the chart.

运行 WinForms 应用程序。创建多个具有不同职位的员工对象，为图表提供数据。

Select the Employee Chart navigation item. The chart will be displayed.

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

Run the ASP.NET application and check that the Employee Chart is also available.

运行ASP.NET应用程序，并检查员工图表是否也可用。