系列最后一章,柱形图的制作 。
一、 生成柱形图
设置图表类型。
对于数据源的添加和其他图表相同,这里就不再说明。
二、 柱形图的样式设计
1 )填充色的改变
series1.FillStyle.Color1 = Color.Red;
获取了 ChartDataSeries 对象之后,设置 FillStayle 的 Color1 属性即会改变柱形的填充色。
2 )渐变色彩的实现
series1.FillStyle.FillType = FillTypeEnum.Gradient;
// 2、设置渐变效果的样式:设置GradientStyle为GradientStyleEnum的枚举值,这里设置为垂直渐变
series1.FillStyle.GradientStyle = GradientStyleEnum.Horizontal;
// 3、设置渐变颜色:Color1为图表默认颜色,如果使用默认方式填充,图标颜色将为Color的颜色。
series1.FillStyle.Color1 = Color.BurlyWood;
// Color2为渐变色彩(使用Gradient或Hatch方式填充图表颜色需设置Color2)。
series1.FillStyle.Color2 = Color.Red;
渐变效果需要设置 FillType 为 Gradient 类型,并且必须设置 Color2 属性。
渐变效果图如下:
渐变效果源码下载地址:
3 )多种颜色填充效果
说明:对于同一序列的柱形只能使用相同填充颜色,实现多种颜色填充,只能使用不同数据序列。所以,假如你只有一组数据,那么可以使用这种效果来制作图表。
C1WebChart1.ChartGroups.Group0.Stacked = true ;
首先,需要设置图标为叠加样式。
for ( int i = 0 ; i < dv.Count; i ++ )
{
ChartDataSeries series = C1WebChart1.ChartGroups[ 0 ].ChartData.SeriesList.AddNewSeries();
// 设置序列长度为1(即每条序列均只有一条数据),这点与饼图设置相同
series.PointData.Length = 1 ;
// 设置每个序列所在x轴位置,让每个序列独立显示。与饼图设置,只有这点区别。
series.X[ 0 ] = i;
// 设置数据序列的y值
series.Y[ 0 ] = float .Parse(dv[i][ " value " ].ToString());
// 设置序列图例显示文字。
series.Label = dv[i][ " name " ].ToString();
}
其次,需要将每条数据放置在不同的数据序列中,该序列颜色系统会自动分配。也可以在这里设置每个序列的颜色。
效果图如下:
多种颜色填充 源码下载地址:
三、 柱形图的 3D 效果
与饼图的 3D 效果相同,只需增加一下代码即可:
C1WebChart1.ChartGroups[ 0 ].Use3D = true ;
// 3D图形的深度
C1WebChart1.ChartArea.PlotArea.View3D.Depth = 10 ;
// 以y轴作为参照的 旋转角度(这里可以看到这个属性的效果)
C1WebChart1.ChartArea.PlotArea.View3D.Rotation = 20 ;
// 以x轴作为参照的 倾斜角度
C1WebChart1.ChartArea.PlotArea.View3D.Elevation = 30 ;
// 设置3D图形的阴影效果,默认是ColorDark(比前景色深),还可以指定为ColorLight(比前景色浅),None(不指定,颜色深浅一样)
C1WebChart1.ChartArea.PlotArea.View3D.Shading = ShadingEnum.ColorDark;
效果图如下:
源码略。
四、 其他。
对于柱形图的边线,可以设置 ChartGroup 的 ShowOutline 属性来禁止显示。改变其颜色,我也不知如何设置。
代码如下:
效果就是这样:
五、 结束
关于 WebChart 就介绍到这里,谢谢关注。
这次演示饼图制作,简单介绍饼图的样式效果及 PlotArea 对象的一些属性。
一、生成饼图
设置图表类型。
DataView dv = new DataView(ds.Tables[ " sanguo " ]);
// 清除图表所有数据序列
C1WebChart1.ChartGroups[ 0 ].ChartData.SeriesList.Clear();
这里和折线图一样。
{
ChartDataSeries series = C1WebChart1.ChartGroups[ 0 ].ChartData.SeriesList.AddNewSeries();
series.PointData.Length = 1 ;
series.Y[ 0 ] = float .Parse(dv[i][ " value " ].ToString());
}
为图表添加数据。
这里与折线图不同的是饼图只需设置坐标轴的 Y 值即可,所有序列的相同索引的数据组合成一个饼图。这里将每一条数据放在一个新的数据序列里,并且每个序列都只有一个元素。这样,所有数据就会呈现在一个饼图中。如图:
这个就是默认的饼图样式,是不是少点什么呢?
接下来,介绍样式的设置。
二、饼图样式设计
1) 添加图例
设置 Legend 对象的 Visible 属性为 true ,图例就会显示出来。这时图例的标签默认为序列的名称。
{
ChartDataSeries series = C1WebChart1.ChartGroups[ 0 ].ChartData.SeriesList[i];
series.Label = dv[i][ " name " ].ToString();
}
设置图例标签的显示内容。为了代码简洁也可以在添加数据的同时设置。
另外,我们还可以使用 Legend 对象(图例对象)设置图例的显示样式。如:
设置图例显示位置。
其他一些属性,例如 Orientation 设置图例显示方向(以纵向显示或横向显示)等,不作详细介绍,可自己尝试使用。
2) 为了让数据更加直观,可在饼图添加标签
{
C1.Win.C1Chart.Label lbl = C1WebChart1.ChartLabels.LabelsCollection.AddNewLabel();
lbl.Text = string .Format( " {0}% " , float .Parse(dv[i][ " value " ].ToString()));
lbl.Compass = LabelCompassEnum.Radial;
lbl.Offset = 20 ;
lbl.Connected = true ;
lbl.Visible = true ;
lbl.AttachMethod = AttachMethodEnum.DataIndex;
AttachMethodData am = lbl.AttachMethodData;
am.GroupIndex = 0 ;
am.SeriesIndex = i;
am.PointIndex = 0 ;
}
首先,实例化标签并设置标签内容及相关属性。
然后使用 AttachMethodData 对象设置标签附加在图表中的位置。
GroupIndex 是指图表索引。(第一篇文章提到过 WebChart 默认支持 2 个图表)
SeriesIndex 是指序列索引。
PointIndex 是指序列中的元素索引。
设置完成,效果图如下:
三、 3D 效果的实现 。
1 )开启 3D 效果。
以 3D 样式显示,该步骤必须存在。
3) 设置 3D 样式
C1WebChart1.ChartArea.PlotArea.View3D.Depth = 20 ;
// 以y轴作为参照的 旋转角度(只有x轴,这个属性设置无效)
C1WebChart1.ChartArea.PlotArea.View3D.Rotation = 90 ;
// 以x轴作为参照的 倾斜角度
C1WebChart1.ChartArea.PlotArea.View3D.Elevation = 30 ;
// 设置3D图形的阴影效果
C1WebChart1.ChartArea.PlotArea.View3D.Shading = ShadingEnum.ColorDark;
3D 样式是使用 PlotArea 对象的View3D属性来设置。
主要就是以上四个属性的设置。
显示效果如下:
四、补充概念
或许之前说到的各图形区域比较容易混淆,下面以图形介绍个图形区域:
灰色 为整个 WebChart 区域,对应对象就是 this.C1WebChart1 。
桔黄色 为图表区域,对应对象为 this.C1WebChart1.ChartArea 。
绿色 为绘图区,对应对象为 this.C1WebChart1.ChartArea.PlotArea 。
红色 为图表的上标题,对应对象为 this.C1WebChart1.Header 。
蓝色 为图表的下标题,对应对象为 this.C1WebChart1.Footer 。
使用相关对象可以设置个区域的样式效果。了解这些可以使用属性窗口快速设置一些简单样式。
五、结束
我希望通过一些实例能够比较全面的介绍 WebChart 的主要对象的使用。在下一次,会演示柱形图的制作。本次实例的完整代码下载地址如下:
本篇文章将演示如何使用 WebChart 制作折线图。并通过示例介绍数据对象一些相关属性以及 ChartArea 的 Axis 的相关属性设置,并演示使用 WebChart 做交互式的设计。
注:版本 ComponentOne.Studio.Enterprise.2006.v2
环境 .NET Compact Framework 1.1
一、生成折线图
1) 获取 WebChart 的第一个图标,并设置其图表类型为折线图
2) 为图表添加数据
获取数据。这里可以根据自己的业务需求,或自动生成或查询数据库,返回一个 DataSet 对象。
PointF[] data = (PointF[])Array.CreateInstance( typeof (PointF), dv.Count);
int i;
for (i = 0 ; i < data.Length; i ++ )
{
float y = float .Parse(dv[i][ " value " ].ToString());
data[i] = new PointF(i, y);
}