DevExpress控件使用交流,DevExpress中国社区Dev联系电话 联系电话:023-68661681

DevExpress WPF在线示例:Chart3D入门教程(一)

来源:   发布时间:2018-04-23   浏览:1980次

创建一个简单的未绑定3D图表

在本教程中,您将学习如何设计一个简单的3D图表,用数据填充它,以及配置通用的图表设置。

执行以下步骤创建具有3D图表的应用程序。

  • 步骤1.创建新项目并添加图表
  • 步骤2.用数据填充图表
  • 步骤3.自定义图表
  • 结果

步骤1.创建新项目并添加图表

运行Microsoft Visual Studio 2012、2013、2015或2017。

  • 创建一个新的WPF应用程序项目。
  • 将Chart3DControl添加到项目中。您可以通过将Chart3DControl组件从DX.18.2:Data&Analytics Toolbox选项卡拖动到主窗口来完成此操作。
    DevExpress
  • 右键单击Chart3D控件,并在上下文菜单中选择Layout|Reset All。这将扩展图表以填充整个窗口。
    DevExpress

在执行这些操作之后,XAML标记应该如下所示。如果没有,用下面的标记覆盖标记。

<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:Chart3D_Lesson1" 
        xmlns:dxc="http://schemas.devexpress.com/winfx/2008/xaml/charts" 
        x:Class="Chart3D_Lesson1.MainWindow" 
        mc:Ignorable="d" 
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <dxc:Chart3DControl>
            <dxc:Chart3DControl.Legends>
                <dxc:Legend BorderBrush="Transparent" 
                            Background="Transparent"/>
            </dxc:Chart3DControl.Legends>
            <dxc:Series3DStorage>
                <dxc:Series3D DisplayName="Series 1">
                    <dxc:Series3D.View>
                        <dxc:SurfaceSeriesView>
                            <dxc:SurfaceSeriesView.FillStyle>
                                <dxc:GradientFillStyle/>
                            </dxc:SurfaceSeriesView.FillStyle>
                        </dxc:SurfaceSeriesView>
                    </dxc:Series3D.View>
                    <dxc:SeriesPoint3DStorage>
                        <dxc:SeriesPoint3D Value="0" XArgument="0" YArgument="0"/>
                        <dxc:SeriesPoint3D Value="0" XArgument="0" YArgument="1"/>
                        <dxc:SeriesPoint3D Value="1" XArgument="1" YArgument="0"/>
                        <dxc:SeriesPoint3D Value="1" XArgument="1" YArgument="1"/>
                        <dxc:SeriesPoint3D Value="0" XArgument="2" YArgument="0"/>
                        <dxc:SeriesPoint3D Value="0" XArgument="2" YArgument="1"/>
                        <dxc:SeriesPoint3D Value="1" XArgument="3" YArgument="0"/>
                        <dxc:SeriesPoint3D Value="1" XArgument="3" YArgument="1"/>
                    </dxc:SeriesPoint3DStorage>
                </dxc:Series3D>
            </dxc:Series3DStorage>
        </dxc:Chart3DControl>
    </Grid>
</Window>

 

步骤2.用数据填充图表

在这个步骤中,您将手动将一个系列添加到3D图表中,并用点手动填充这个系列。

  • 默认情况下,3D图表系列源设置为Series3DStorage。这个存储的Series3DStorage。Series集合保存所有手动添加的.。要调用集合编辑器,请单击Series3DStorage.Series属性对面的省略号按钮。
    DevExpress
  • 从Series3DStorage.Series集合中删除默认系列。
    DevExpress
  • 然后,单击Add按钮添加系列。
    DevExpress
  • 要手动用点填充系列,请将SeriesPoint3DStorage对象分配给Series3D.PointSource属性。
    DevExpress
  • 展开PointSource属性组并单击SeriesPoint3DStorage对面的省略号按钮。Points属性以调用系列点编辑器。
    DevExpress
  • 单击Add按钮向点集合添加点。
    DevExpress
  • 接下来,您需要定义点SeriesPoint3D.XArgument、SeriesPoint3D.YArgument和SeriesPoint3D.Value属性,如下图所示。
    DevExpress
  • 重复前面的两个操作以添加其他点。使用以下表数据定义点参数
    DevExpress
  • 单击OK离开SeriesPoint3D集合编辑器。再次单击OK离开Series3D集合编辑器。

完成这些操作之后,您将获得以下XAML。

<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:Chart3D_Lesson1" 
        xmlns:dxc="http://schemas.devexpress.com/winfx/2008/xaml/charts" 
        x:Class="Chart3D_Lesson1.MainWindow" 
        mc:Ignorable="d" 
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <dxc:Chart3DControl>
            <dxc:Chart3DControl.Legends>
                <dxc:Legend BorderBrush="Transparent" Background="Transparent"/>
            </dxc:Chart3DControl.Legends>
            <dxc:Series3DStorage>
                <dxc:Series3D>
                    <dxc:SeriesPoint3DStorage>
                        <dxc:SeriesPoint3D Value="130.32" XArgument="Canada"  YArgument="Fossil"/>
                        <dxc:SeriesPoint3D Value="597.24" XArgument="Russia"  YArgument="Fossil"/>
                        <dxc:SeriesPoint3D Value="333.45" XArgument="Germany" YArgument="Fossil"/>
                        <dxc:SeriesPoint3D Value="232.49" XArgument="UK"      YArgument="Fossil"/>
                        <dxc:SeriesPoint3D Value="125.28" XArgument="Spain"   YArgument="Fossil"/>
                        <dxc:SeriesPoint3D Value="320.37" XArgument="Canada"  YArgument="Renewable"/>
                        <dxc:SeriesPoint3D Value="199.08" XArgument="Russia"  YArgument="Renewable"/>
                        <dxc:SeriesPoint3D Value="146.25" XArgument="Germany" YArgument="Renewable"/>
                        <dxc:SeriesPoint3D Value="41.64"  XArgument="UK"      YArgument="Renewable"/>
                        <dxc:SeriesPoint3D Value="80.91"  XArgument="Spain"   YArgument="Renewable"/>
                        <dxc:SeriesPoint3D Value="81.45"  XArgument="Canada"  YArgument="Nuclear"/>
                        <dxc:SeriesPoint3D Value="151.68" XArgument="Russia"  YArgument="Nuclear"/>
                        <dxc:SeriesPoint3D Value="87.75"  XArgument="Germany" YArgument="Nuclear"/>
                        <dxc:SeriesPoint3D Value="65.93"  XArgument="UK"      YArgument="Nuclear"/>
                        <dxc:SeriesPoint3D Value="54.81"  XArgument="Spain"   YArgument="Nuclear"/>
                    </dxc:SeriesPoint3DStorage>
                </dxc:Series3D>
            </dxc:Series3DStorage>
        </dxc:Chart3DControl>
    </Grid>
</Window>

 

步骤3.自定义图表

按照本节中的说明配置图表外观。

指定序列视图类型

一个系列的出现取决于它的观点。要设置系列视图类型,请为Series3D实例的Series3DBase.View属性分配一个Bar3DSeriesView对象。

DevExpress

设置图表比例

要更改图表高度、宽度和深度之间的比例关系,请将Chart3DControl.AspectRatio属性定义为5.53。为此,请使用下面的XAML。

<dxc:Chart3DControl AspectRatio="5 5 3">
<!-- Other Chart3D settings -->
</dxc:Chart3DControl>

 

若要为图表中的所有条设置相等的大小,请将Bar3DSeriesView..lBarSize属性指定为true。

DevExpress

给系列着色

根据每个系列点的值为每个系列点提供特定的颜色。

  • 为此,展开Series3D对象View属性组,并将RangeColorizer3D实例分配给Series3DViewBase.Colorizer属性。
    DevExpress
  • 然后,设置系列点值间隔,这些值间隔将用于通过各种颜色指示点。为此,指定RangeColorizer3D.RangeStops属性为0 80 150 300 600。
    DevExpress
  • 定义palettecolorizer3dbase,office2013中的调色板。
    DevExpress
  • 将Colorizer3DBase.LegendTextPattern属性指定为{V1:F0}-{V2:F0}TWh/a以设置图例文本格式。
    DevExpress

添加标题

  • 在您的图表中添加标题。为此,单击ChartControlBase.Titles属性对面的省略号按钮。
    DevExpress
  • 单击Add向Titles集合添加新标题。
  • 指定TitleBase.Content属性作为世界电力消耗。
    DevExpress
  • 然后,通过将TitleBase.HorizontalAlignment属性设置为中心来修改标题位置。
    DevExpress
  • 单击OK按钮执行更改并隐藏编辑器。

结果

下面的XAML是最终显示。

<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:Chart3D_Lesson1" 
        xmlns:dxc="http://schemas.devexpress.com/winfx/2008/xaml/charts" 
        x:Class="Chart3D_Lesson1.MainWindow" 
        mc:Ignorable="d" 
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <dxc:Chart3DControl AspectRatio="5 5 3">
            <dxc:Chart3DControl.Legends>
                <dxc:Legend BorderBrush="Transparent" 
                            Background="Transparent"/>
            </dxc:Chart3DControl.Legends>
            <dxc:Chart3DControl.Titles>
                <dxc:Title Content="World Electricity Consumption" 
                           HorizontalAlignment="Center"/>
            </dxc:Chart3DControl.Titles>
            <dxc:Series3DStorage>
                <dxc:Series3D>
                    <dxc:Series3D.View>
                        <dxc:Bar3DSeriesView EqualBarSize="True">
                            <dxc:Bar3DSeriesView.Colorizer>
                                <dxc:RangeColorizer3D RangeStops="0 80 150 300 600" 
                                                      LegendTextPattern="{}{V1:F0} - {V2:F0} TWh/a">
                                    <dxc:RangeColorizer3D.Palette>
                                        <dxc:Office2013Palette/>
                                    </dxc:RangeColorizer3D.Palette>
                                </dxc:RangeColorizer3D>
                            </dxc:Bar3DSeriesView.Colorizer>
                        </dxc:Bar3DSeriesView>
                    </dxc:Series3D.View>
                    <dxc:SeriesPoint3DStorage>
                        <dxc:SeriesPoint3D Value="130.32" XArgument="Canada"  YArgument="Fossil"/>
                        <dxc:SeriesPoint3D Value="597.24" XArgument="Russia"  YArgument="Fossil"/>
                        <dxc:SeriesPoint3D Value="333.45" XArgument="Germany" YArgument="Fossil"/>
                        <dxc:SeriesPoint3D Value="232.49" XArgument="UK"      YArgument="Fossil"/>
                        <dxc:SeriesPoint3D Value="125.28" XArgument="Spain"   YArgument="Fossil"/>
                        <dxc:SeriesPoint3D Value="320.37" XArgument="Canada"  YArgument="Renewable"/>
                        <dxc:SeriesPoint3D Value="199.08" XArgument="Russia"  YArgument="Renewable"/>
                        <dxc:SeriesPoint3D Value="146.25" XArgument="Germany" YArgument="Renewable"/>
                        <dxc:SeriesPoint3D Value="41.64"  XArgument="UK"      YArgument="Renewable"/>
                        <dxc:SeriesPoint3D Value="80.91"  XArgument="Spain"   YArgument="Renewable"/>
                        <dxc:SeriesPoint3D Value="81.45"  XArgument="Canada"  YArgument="Nuclear"/>
                        <dxc:SeriesPoint3D Value="151.68" XArgument="Russia"  YArgument="Nuclear"/>
                        <dxc:SeriesPoint3D Value="87.75"  XArgument="Germany" YArgument="Nuclear"/>
                        <dxc:SeriesPoint3D Value="65.93"  XArgument="UK"      YArgument="Nuclear"/>
                        <dxc:SeriesPoint3D Value="54.81"  XArgument="Spain"   YArgument="Nuclear"/>
                    </dxc:SeriesPoint3DStorage>
                </dxc:Series3D>
            </dxc:Series3DStorage>
        </dxc:Chart3DControl>
    </Grid>
</Window>

 

应用程序现在就绪。运行项目以查看结果。下面的图像在运行时演示生成的图表。

DevExpress

买 DevExpress Universal Subscription  免费赠 万元汉化资源包1套!

限量15套!先到先得,送完即止!立即抢购>>

本站文章除注明转载外,均为本站原创或翻译
欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果
转载请注明:文章转载自:DevExpress控件中文网 [https://www.devexpresscn.com/]
本文地址:https://www.devexpresscn.com/post/1136.html

相关产品: DevExpress Universal Subscription,


联系我们
  • 重庆总部 023-68661681 400-700-1020
  • 北京公司 010-56705895
购买
  • sales@evget.com
合作
  • business@evget.com