提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

C# WPF中用ChartControl绘制柱形图

2023-04-18 14:50:55 时间

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

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结果

<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>

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

相关文章