方法：チャートを表示し、リストビュー：どのようにグラフとしてリストビューを表示します

デフォルトのリストエディタ可視化するために使用されるビュー XAFアプリケーションではありGridListEditorとASPxGridListEditor（それぞれのWinFormsとASP.NETアプリケーションで使用されます）。これらのデフォルトのリストエディタは、グリッドとしてリストビューを視覚化します。このトピックでは、によって提供される機能使用して、チャートとリストビューを視覚化する方法を示しチャートモジュールを。可視化リストビュー、ChartListEditorとASPxChartListEditor一覧編集者で定義されるアプリケーションモデル。使用してチャートの設定のカスタマイズチャートデザイナはまた、実証されます。

可視化アプリケーションビューXAFデフォルトのリストエディタはGridListEditorとASPxGridListEditorである（とWinFormsのASP.NETアプリケーションで使用されました）。デフォルトのリストエディタはグリッドとして視覚化ビューが一覧表示されます。このトピックでは、グラフとして可視化され、リストビューを提供ファンクション・チャートモジュールを使用する方法を示します。グラフエディタとASPxChartListEditorビジュアライザエディタのリストビューから、アプリケーションモデルで定義されます。チャートデザイナはまた、カスタマイズされたチャート設定の使用のデモンストレーションを行います。

ヒントヒント

完全なサンプルプロジェクトは、DevExpress社のコード例のデータベースで利用可能でhttp://www.devexpress.com/example=E2840

完全なサンプルプロジェクトは、コードサンプルデータベースDevExpress社で見つけることができますhttp://www.devexpress.com/example=E2840

。

チャートリストエディタの使用方法を示すサンプルアプリケーションの実装は、次のステージで構成されています。

サンプル永続オブジェクトを実装します
新しいリストビューのノードを作成します。
チャートリストビューのナビゲーションアイテムの作成
チャートモジュールを追加
リストビューのリストエディタを変更
チャートの設定を指定
アプリケーションの実行

次の段階が含まれるサンプルアプリケーションのプレゼンテーションチャートリストエディタを実装します。

実施例永続オブジェクト
新しいリストビューのノードを作成します。
リストビューのナビゲーションチャートのエントリを作成します。
チャートモジュールを追加します。
変更リストエディタリストビュー
チャート設定を指定します。
アプリケーションを実行します。

ヒントヒント

あなたは図表リストエディタでの例を見ることができますFeatureCenterとXCRM XAFに同梱されてデモを。これらのデモは、に位置している％のPUBLICの％\ドキュメント\ DevExpress社のデモ19.2 \コンポーネント\ eXpressAppフレームワークデフォルトで、フォルダ。

あなたは、リストエディタ機能センターでサンプルチャートとXCRM XAF伴うプレゼンテーションを表示することができます。デモが配置されているPUBLIC％\ドキュメント\ DevExpress社のデモ％19.2 \コンポーネント\ FrameworkのeXpressAppデフォルトでは、フォルダ。

サンプル永続オブジェクトを実装します

実施例永続オブジェクト

私たちは、以下の考える従業員の永続クラス、または同じEntity Frameworkのクラスを。

私たちは、同じクラスの以下の従業員や永続的なEntity Frameworkのクラスを考えてみましょう。

使用してDevExpress.Persistent.Baseを。
使用してDevExpress.Persistent.BaseImplを。
使用してDevExpress.Xpoを。
使用してSystem.ComponentModelを。
// ... 
[DefaultClassOptions、DefaultProperty（がNameOf（フルネーム））、imagenameの（" BO_Person " ）]
 パブリック クラス従業：BaseObject {
     公共の従業員（セッションsession）：ベース（セッション）{}
     プライベート 文字列のfirstName。
    プライベート 文字列lastNameの。
    プライベート 文字列の位置。
    [VisibleInListView（偽）]
     パブリック 文字列姓は{
         取得 { 戻りfirstNameのを。}
         集合 {SetPropertyValue（がNameOf（姓）、REF のfirstName、値）; } 
    } 
    [VisibleInListView（偽）]
     パブリック 文字列氏名{
         取得 { 戻りlastNameのを、}
         集合 {SetPropertyValue（がNameOf（氏名）、REF lastNameの値）。} 
    } 
    [VisibleInDetailView（偽）]
     パブリック 文字列のFullName {
         GET{ 戻り String.Formatの（" {0} {1} " 、姓、氏名）} 
    } 
    パブリック 文字列の位置{
         取得 { 戻り位置と、}
         集合 {SetPropertyValue（がNameOf（位置）、REF 位置、値）。} 
    } 
}

Note 注意

が、従業員が XPO永続クラスで、ここに示されたアプローチは、あまりにもEntity Frameworkを使用することができます。

従業員は、XPO永続クラスですが、ここに示された方法は、Entity Frameworkを使用しても使用することができますが。

この例では、異なる位置で従業員の量を比較するために用いることができる従業員のチャートを作成します。

この例では、異なる位置を持っている従業員の数を比較するために使用することができ、「従業員」のグラフを作成します。

新しいリストビューのノードを作成します。

チャートリストエディタにより可視化されるようにリストビューを定義するリストビューのノードを作成するには、以下の手順に従ってください。

呼び出しモデルエディタのためのプラットフォームに依存しないモジュールプロジェクト。
移動ビュー | Employee_ListViewのために自動生成されたノード、従業員の永続オブジェクト。それを右クリックし、クローンを。

グラフエディタビジュアルリストビューからノードリストを定義する手順は、次のリストビューのノードを作成します。

モデルエディタは、プラットフォームに依存しないモジュールプロジェクトを呼び出し。
ビューにナビゲート|自動的に従業員の永続オブジェクト用に生成されEmployee_ListViewノード、。それを右クリックし、「クローン」を

ChartsCloneNode

リストビューのノードのコピーが作成されます。

リストビューノードのコピーが作成されます。

新しいノードの変更IModelView.Id「Employee_ListView_Chart」にプロパティを。
新しいノードのIModelView.Idプロパティは「Employee_ListView_Chart」に変更されます。

チャートリストビューのナビゲーションアイテムの作成

リストビューのナビゲーションチャートのエントリを作成します。

Employee_ListView_Chart前の段階で作成されたリストビューは、エンドユーザーがアクセスする必要があります。だから、作成従業員チャート ナビゲーションアイテムあり、IModelNavigationItem.Viewの「Employee_ListView_Chart」へのプロパティセットを。

ステージ上で作成したEmployee_ListView_Chartリストビューは、エンドユーザーは、ビューへのアクセス権を持っている必要があります。したがって、プロパティ「Employee_ListView_Chart」に設定されている従業員のチャートナビゲーションアイテムの作成。

ChartsNavigationItem

ナビゲーション項目の作成がで詳述されている項目は、ナビゲーションコントロールに追加するチュートリアル。

詳細にチュートリアル「ナビゲーションコントロールに項目を追加するには、」ナビゲーション項目の説明を作成します。

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 右侧的省略号按钮。

ChartSettings

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モジュールプロジェクトを呼び出し、同じ手順を実行してください。。IModelWebChartSettings好ましい幅とIModelWebChart設定 - 二つの追加属性があることに注意してくださいは、ノードグラフASP.NETアプリケーションを設定するために使用することができます。優先の高さ。「優先幅」属性は、ピクセル単位でのチャート（（グラフコントロールが自動的に利用可能なスペースに合わせて、その幅を調整）可能な最小幅を指定します。「優先の高さ」属性は、正確な高さを指定します。

アプリケーションの実行

アプリケーションを実行します。

WinFormsのアプリケーションを実行します。いくつかの作成従業員のグラフのデータを提供するために、異なる位置にオブジェクトを。

ファイル名を指定して実行のWinFormsアプリケーション。グラフのデータを提供するために、別のスタッフの位置に複数のオブジェクトを作成します。

ChartsRunWinApp1

選択従業員チャートナビゲーションアイテムを。チャートが表示されます。

タブナビゲーションキーの従業員を選択します。チャートを表示します。

ChartsRunWinApp2

ASP.NETアプリケーションを実行していることを確認し、従業員のチャートは、も可能です。

ファイル名を指定して実行ASP.NETアプリケーション、およびスタッフのチャートでも利用可能であることを確認してください。

ChartsRunWebApp2