C# WPF中用ChartControl绘制柱形图

2021-12-13 20:11:35 浏览数 (2)

本文程演示了图表设计器,它允许您从头开始自定义或创建图表。本文演示使用设计器创建简单未绑定图表所需的步骤。

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>

运行应用程序。下图显示了运行时生成的图表:

0 人点赞