← 返回所有博客文章

3D 一直是近几年的热门话题,我们接触最多的可能是 3D 电影。从 2010 V3 版本起,ComponentOne 发布了 3D 图表 C1Chart3D-由X、Y、Z三个轴组成的图表,是相对于只有长和宽的平面而言。

 

在介绍 3D 图表之前,我们需要了解如何组织 3D 图表的数据。

数据组织方式

其实X、Y轴并非是真实的业务数据,它只是用来定位和描述 Z 轴值的标记。我们真正需要的是为 Z 轴获取业务数据。关系图如下:

  Y0 Y1 Y2
X0 Z[0,0] Z[0,1] Z[0,2]
X1 Z[1,0] Z[1,1] Z[1,2]
X2 Z[2,0] Z[2,1] Z[2,2]

加入真实数据后显示如下:

X Y Z
0 0 3吨
1 0 2吨
2 0 1吨
0 1 2吨
1 1 2吨
2 1 2吨
0 2 1吨
1 2 2吨
2 2 3吨
构造数据代码如下:
 1: var zdata = new double[3, 3];
 2: zdata[0, 0] = 1;
 3: zdata[0, 1] = 2;
 4: zdata[0, 2] = 3;
 5: zdata[1, 0] = 2;
 6: zdata[1, 1] = 2;
 7: zdata[1, 2] = 2;
 8: zdata[2, 0] = 3;
 9: zdata[2, 1] = 2;
 10: zdata[2, 2] = 1;

 

添加到 Chart3D 中 :

 1: c1Chart3D1.Children.Add(new GridDataSeries() { ZData = zdata });

以上代码效果图如下:

更改3D图表样式

3D图表内置了 6 中表面图样式,更改方式如下:

 1: c1Chart3D1.ChartType = Chart3DType.SurfaceZoneContour;

 

效果图:

默认情况下,3D 图表使用两种颜色及在其之间的 12 个渐进色来绘制图表。当然我们可以自定义渲染颜色和渐进色层级数量。

 1: c1Chart3D1.ColorPalette = new Color[] { Colors.Blue, Colors.Yellow, Colors.Red };
 2: c1Chart3D1.ContourLevelsCount = 12;

 

效果图:

添加图例

图例可以用于辅助理解图表数据,我们可以在设计时轻松添加图例,XAML代码如下:

 1: <c1:C1Chart3D Name="c1Chart3D1">
 2:     <c1:C1Chart3D.Legend>
 3:         <c1:C1Chart3DLegend />
 4:     </c1:C1Chart3D.Legend>
 5: </c1:C1Chart3D>

默认情况下,图例显示在图表右侧,我们可以使用 C1Chart3D1.Legend.Position 定制图例位置,并且提供了显示方向、格式化字符串、定制标签位置等功能。

旋转图表

我们可以通过 Elevation 和 Azimuth 两个属性来设置图表的旋转角度。

 1: c1Chart3D1.Elevation = 175; //默认值 = 150
 2: c1Chart3D1.Azimuth = 120; //默认值 = 30

 

定制坐标轴

3D图表可以定制标签的显示频率、样式及轴标题。

 1: //设置标签显示频率
 2: c1Chart3D1.AxisX.MajorUnit = 1;
 3: c1Chart3D1.AxisY.MajorUnit = 1;
 4: c1Chart3D1.AxisZ.MajorUnit = 0.5;
 5:  
 6: //设置标签显示样式
 7: c1Chart3D1.AxisX.MajorTickAppearance = TickAppearance.Line;
 8: c1Chart3D1.AxisY.MajorTickAppearance = TickAppearance.Line;
 9: c1Chart3D1.AxisZ.MajorTickAppearance = TickAppearance.Line;
 10:  
 11: //设置坐标轴标题
 12: c1Chart3D1.AxisX.Title = new TextBlock { Text = "X Axis", FontSize = 14 };
 13: c1Chart3D1.AxisY.Title = new TextBlock { Text = "Y Axis", FontSize = 14 };
 14: c1Chart3D1.AxisZ.Title = new TextBlock { Text = "Z Axis", FontSize = 14 };

 

效果图:

显示底部和顶部效果

以下代码用于显示顶部和底部的效果:

 1: c1Chart3D1.CeilAppearance = PlaneAppearance.Contour;
 2: c1Chart3D1.FloorAppearance = PlaneAppearance.ZoneContour;

通过以上描述,你已经初步了解 3D 图表的使用方法了吧。