本文程演示了图表设计器,它允许您从头开始自定义或创建图表。本文演示使用设计器创建简单未绑定图表所需的步骤。
01使用设计器创建图表
Step 1. 创建新项目并运行图表设计器
- 创建一个新的WPF应用程序项目。
- 如第1课所述,将ChartControl组件添加到项目中(请参见步骤1)。
- 调用图表控件的智能标记菜单或快速操作。选择运行设计器链接:
这将调用图表设计器。
您可以在图表元素树部分中看到并排条形图系列(系列1)。请注意,系列1没有系列点。
Step 2. 将Series 添加到图表中
在本节中,将第二个系列添加到图表中,并用点填充这两个系列。
- 在树中选择系列1,然后在“选项”选项卡中,指定“填充”作为系列的显示名称。
- 使用“展开”按钮展开“填充系列”选项,然后选择“点”项目。
- 在“数据”选项卡中,使用以下数据填充参数和值列:
然后,将第二个系列添加到图表中(例如,面积系列)。为此,请执行以下操作:
- 单击“元素”树中系列项目的“添加”按钮。在“调用”对话框中,单击“区域二维系列类型”。这将使用随机生成的数据将面积系列(系列2)添加到图表中。请注意,参数的轴刻度类型是基于第一个系列的定性数据定义的。第二个序列是隐藏的,因为它有数值参数。
- 将第二个系列的显示名称指定为区域。
- 单击“清除系列数据”按钮以清除自动生成的数据。
然后,定义面积系列点的数据,如下所示:
Step 3. 自定义图表
本节介绍如何自定义图表的外观。
#在单独的窗格中显示系列
以下步骤显示如何在单独的窗格中显示每个系列:
- 展开“窗格”项。单击“其他窗格”项目的“添加”按钮以创建新窗格。
- 在“图元”树中选择面积系列。在选项选项卡中,找到窗格选项,并在其下拉列表中选择窗格#1项。
添加次轴
按照以下步骤添加和自定义次轴:
- 展开“轴”项目。单击次Y轴项目的“添加”按钮以添加次Y轴。
选择面积系列。在“选项”选项卡中,使用选项的下拉列表将“Y轴”选项设置为次轴Y#1。
在“图元”树中选择次轴Y#1。然后,将轴的对齐选项设置为“近”。
下图显示了结果。单击“保存并退出”按钮应用所有更改并关闭设计器。
02结果
代码语言:javascript复制<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:Lesson2"
xmlns:dxc="http://schemas.devexpress.com/winfx/2008/xaml/charts"
x:Class="Lesson2.MainWindow"
mc:Ignorable="d"
Title="MainWindow" Height="405" Width="720">
<Grid>
<dxc:ChartControl>
<dxc:ChartControl.Legends>
<dxc:Legend/>
</dxc:ChartControl.Legends>
<dxc:XYDiagram2D PaneOrientation="Vertical">
<dxc:XYDiagram2D.SecondaryAxesY>
<dxc:SecondaryAxisY2D x:Name="axisy0" Alignment="Near"/>
</dxc:XYDiagram2D.SecondaryAxesY>
<dxc:XYDiagram2D.DefaultPane>
<dxc:Pane x:Name="pane"/>
</dxc:XYDiagram2D.DefaultPane>
<dxc:XYDiagram2D.Panes>
<dxc:Pane x:Name="pane0"/>
</dxc:XYDiagram2D.Panes>
<dxc:BarSideBySideSeries2D DisplayName="Population">
<dxc:SeriesPoint Argument="USA" Value="321.3"/>
<dxc:SeriesPoint Argument="Russia" Value="146.2"/>
<dxc:SeriesPoint Argument="Canada" Value="35.7"/>
<dxc:SeriesPoint Argument="Brazil" Value="201"/>
<dxc:SeriesPoint Argument="Australia" Value="23.1"/>
</dxc:BarSideBySideSeries2D>
<dxc:AreaSeries2D DisplayName="Area"
dxc:XYDiagram2D.SeriesPane="{Binding ElementName=pane0}"
dxc:XYDiagram2D.SeriesAxisY="{Binding ElementName=axisy0}">
<dxc:SeriesPoint Argument="USA" Value="9.5"/>
<dxc:SeriesPoint Argument="Russia" Value="17.1"/>
<dxc:SeriesPoint Argument="Canada" Value="10"/>
<dxc:SeriesPoint Argument="Brazil" Value="8.5"/>
<dxc:SeriesPoint Argument="Australia" Value="7.7"/>
</dxc:AreaSeries2D>
</dxc:XYDiagram2D>
</dxc:ChartControl>
</Grid>
</Window>
运行应用程序。下图显示了运行时生成的图表: