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 图表的使用方法了吧。