ComponentOne WebChart的使用

ComponentOne WebChart的使用 - 5（柱形图） 系列最后一章，柱形图的制作 。 ? 一、 生成柱形图 C1WebChart1.ChartGroups.Group0.ChartType? = ?Chart2DTypeEnum.Bar; 设置图表类型。 ? 对于数据源的添加和其他图表相同，这里就不再说明。 ? 二、 柱形图的样式设计 1 ）填充色的改变 ChartDataSeries?series1? = ??C1WebChart1.ChartGroups[ 0 ].ChartData.SeriesList.AddNewSeries(); series1.FillStyle.Color1? = ?Color.Red; 获取了 ChartDataSeries 对象之后，设置 FillStayle 的 Color1 属性即会改变柱形的填充色。 ? 2 ）渐变色彩的实现 // 1、设置图表颜色填充方式为渐变方式：设置FillType?为Gradient（默认为SolidColor方式，单一色填充） 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 属性。 ? 渐变效果图如下： 渐变效果源码下载地址： http://www.blogjava.net/Files/kdboy/ChartBar1.rar ? ? 3 ）多种颜色填充效果 说明：对于同一序列的柱形只能使用相同填充颜色，实现多种颜色填充，只能使用不同数据序列。所以，假如你只有一组数据，那么可以使用这种效果来制作图表。 ? // 1、需设置图表为叠加样式：Stacked设为ture?（否则所有系列将单列显示，柱形图会变细） C1WebChart1.ChartGroups.Group0.Stacked? = ? true ; 首先，需要设置图标为叠加样式。 ? // 2、类似饼图设置，为每条柱形图创建序列 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(); } 其次，需要将每条数据放置在不同的数据序列中，该序列颜色系统会自动分配。也可以在这里设置每个序列的颜色。 ? 效果图如下： 多种颜色填充 源码下载地址： http://www.blogjava.net/Files/kdboy/ChartBar2.rar ? ? 三、 柱形图的 3D 效果 与饼图的 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 属性来禁止显示。改变其颜色，我也不知如何设置。 代码如下： C1WebChart1.ChartGroups[ 0 ].ShowOutline? = ? false ; 效果就是这样： ? 五、 结束 关于 WebChart 就介绍到这里，谢谢关注。 posted @ 2007-05-07 16:05 kdboy 阅读(119) | 评论 (0) | 编辑 收藏 2007年3月21日 ComponentOne WebChart的使用 - 4（饼图） 这次演示饼图制作，简单介绍饼图的样式效果及 PlotArea 对象的一些属性。 ? 一、生成饼图 C1WebChart1.ChartGroups.Group0.ChartType? = ?Chart2DTypeEnum.Pie; 设置图表类型。? ? DataSet?ds? = ?GetDataSet(); DataView?dv? = ? new ?DataView(ds.Tables[ " sanguo " ]); // 清除图表所有数据序列 C1WebChart1.ChartGroups[ 0 ].ChartData.SeriesList.Clear(); 这里和折线图一样。 ? for ( int ?i = 0 ;?i? < ?dv.Count;?i ++ ) { ???????ChartDataSeries?series? = ?C1WebChart1.ChartGroups[ 0 ].ChartData.SeriesList.AddNewSeries(); ???????series.PointData.Length? = ? 1 ; ???????series.Y[ 0 ]? = ? float .Parse(dv[i][ " value " ].ToString()); } 为图表添加数据。 这里与折线图不同的是饼图只需设置坐标轴的 Y 值即可，所有序列的相同索引的数据组合成一个饼图。这里将每一条数据放在一个新的数据序列里，并且每个序列都只有一个元素。这样，所有数据就会呈现在一个饼图中。如图： 这个就是默认的饼图样式，是不是少点什么呢？ 接下来，介绍样式的设置。 ? 二、饼图样式设计 1）? 添加图例 C1WebChart1.Legend.Visible? = ? true ; 设置 Legend 对象的 Visible 属性为 true ，图例就会显示出来。这时图例的标签默认为序列的名称。 ? for ( int ?i = 0 ;?i? < ?dv.Count;?i ++ ) { ???????ChartDataSeries?series? = ?C1WebChart1.ChartGroups[ 0 ].ChartData.SeriesList[i]; ???????series.Label = dv[i][ " name " ].ToString(); } 设置图例标签的显示内容。为了代码简洁也可以在添加数据的同时设置。 ? 另外，我们还可以使用 Legend 对象（图例对象）设置图例的显示样式。如： C1WebChart1.Legend.Compass? = ?CompassEnum.West; 设置图例显示位置。 ? 其他一些属性，例如 Orientation 设置图例显示方向（以纵向显示或横向显示）等，不作详细介绍，可自己尝试使用。 ? 2）? 为了让数据更加直观，可在饼图添加标签 for ( int ?i = 0 ;?i? < ?dv.Count;?i ++ ) { ???????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 效果。 C1WebChart1.ChartGroups[ 0 ].Use3D? = ? true ; 以 3D 样式显示，该步骤必须存在。 ? 3）? 设置 3D 样式 // 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 的主要对象的使用。在下一次，会演示柱形图的制作。本次实例的完整代码下载地址如下： ?http://www.blogjava.net/Files/kdboy/ChartPie.rar posted @ 2007-03-21 22:03 kdboy 阅读(187) | 评论 (0) | 编辑 收藏 2007年3月8日 ComponentOne WebChart的使用 - 3（折线图） ??? 本篇文章将演示如何使用 WebChart 制作折线图。并通过示例介绍数据对象一些相关属性以及 ChartArea 的 Axis 的相关属性设置，并演示使用 WebChart 做交互式的设计。 ??? 注：版本 ComponentOne.Studio.Enterprise.2006.v2? ??? ????环境 .NET Compact Framework 1.1 ? 一、生成折线图 1) 获取 WebChart 的第一个图标，并设置其图表类型为折线图 C1WebChart1.ChartGroups[ 0 ].ChartType? = ?Chart2DTypeEnum.XYPlot; 2) 为图表添加数据 DataSet?ds? = ?GetDataSet(); 获取数据。这里可以根据自己的业务需求，或自动生成或查询数据库，返回一个 DataSet 对象。 DataView?dv? = ? new ?DataView(ds.Tables[ " sanguo " ]); 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); } 将数据封装在 PointF 类型的对象数组中。这里可以使用任何方式封装数据。 ? // 清除图表所有数据序列 C1WebChart1.ChartGroups[ 0 ].ChartData.SeriesList.Clear(); // 创建一个新的数据序列，并设置数据 ChartDataSeries?series? = ?C1WebChart1.ChartGroups[ 0 ].ChartData.SeriesList.AddNewSeries(); WebChart 默认会有 4 个数据序列，为了不让其他序列影响输出效果，清除序列集合中的所有序列，并且创建一个新的序列。 ? series.PointData.CopyDataIn(data); 将数据添加至新建的数据序列中。这里使用 PointData 属性，同时为 X 、 Y 坐标付值。 ? 到这里，我们便可以运行程序，看到一个有我们的数据生成的一个默认样式的折线图。下面来介绍使用 ChartDataSeries 对象设置图形的样式。 ? 二、使用 ChartDataSeries 对象设置折线图样式 关于 ChartDataSeries 对象，之前已作了简单介绍，这里直接以代码介绍其部分属性。 series.FitType? = ?FitTypeEnum.Spline; 设置折线为平滑曲线。 series.LineStyle.Color? = ?Color.Red; 设置折线颜色为红色。 LineStyle 的相关属性： Pattern - 设置折线的类型 （实心直线、点线等），其值为 LinePatternEnum 枚举类型。 Thickness – 设置折线厚度 series.SymbolStyle.Shape? = ?SymbolShapeEnum.InvertedTri; series.SymbolStyle.Color? = ?Color.Blue; 设置折线上数据点的符号形状为倒三角，颜色为蓝色。 还可以通过 SymbolStyle 设置符号的大小，符号边线的颜色及厚度。可以自己尝试。 ? 三、坐标轴的设置 Axis?ax? = ?C1WebChart1.ChartArea.AxisX; 获取图表的 X 坐标轴。 ? ax.AnnoMethod? = ?AnnotationMethodEnum.ValueLabels;? 设置坐标轴刻度标签显示方式，这里使用 ValueLabels ，有用户来制定标签内容。默认为 Values 模式，有系统自动标注标签内容。 for (i? = ? 0 ;?i? < ?data.Length;?i ++ ) { ??????DataRowView?drv? = ?dv[i]; ??????ax.ValueLabels.Add(i,?( string )drv[ " name " ]); } 设置坐标轴刻度标签显示内容。 ax.ValueLabels.Add 的第一个参数为图表数据的 x 值，第二个参数为对应显示的标签文本。 ? ax.AnnotationRotation? = ? - 60 ; 设置刻度标签的旋转角度。 对于标签内容还可以使用属性 AnnoFormatString 来设置内容的格式。 ax.Text? = ? " X?坐标轴? " ; 设置坐标轴标题。 ax.Rotation? = ?RotationEnum.Rotate90; 设置坐标轴标题的旋转角度。当坐标轴标题设置以后生效。 对于坐标轴标题，还可以设置它的 对齐方式，使用属性 Alignment 。 ? ax.Max? = ?data.Length? - ?. 5 ; 设置坐标轴的最大长度 相应的还有 Min 属性设置坐标轴的最小长度， Origin 属性 设置坐标轴原点。对应这些，还有 AutoMax 、 AutoMin 、 AutoOrigin 等 bool 类型的属性，表示是否自动设置。 对于刻度值的也有类似属性： UnitMajor 、 UnitMinor 设置主、副刻度的单位长度。以及对应的 auto 属性等。 ? 除此之外，还有一些特殊属性： Reverse 属性：使坐标轴反转。 ScrollBar 属性：为坐标轴添加滚动条。 Visible 属性：可以隐藏坐标轴。 OnTop 属性：可以设置坐标轴显示在图表上方。 等等。 在我们使用 .NET 开发环境中，会有智能感知的相关提示，对于对象属性的使用会简单得多。这里只介绍了主要的属性，其他属性可根据需要自行尝试。 ? 四、交互式设计 C1WebChart1.ImageAreas.GetByName( " ChartArea " ).href = " http://kdboy.spaces.live.com " ?temp_href = " http://kdboy.spaces.live.com " ; 为图表区域增加链接。 C1WebChart1.ImageAreas.GetByName( " ChartData " ).Tooltip? = ? " X={#XVAL},?Y={#YVAL:c} " ; 为折线上的数据点增加鼠标提示。（鼠标移至数据点的符号上，会提示你所设置文本） C1WebChart1.ImageAreas.GetByName( " Footer " ).Attributes? = ? " οnclick=window.open('http://kdboy.spaces.live.com') " ; 为图表底部添加点击事件。 ? 五、补充 C1WebChart1.Footer.Text? = ? " Web?Chart?Test! " ; C1WebChart1.Footer.Visible? = ? true ; 这里设置图标下标题，并让图表 Footer 区域显示在图表中。 对于 C1WebChart 的相关属性比较简单，不再一一演示。 ? 六、结束 以上是折线图的部分代码，完整示例可以通过下面链接下载。 下载地址：http://www.blogjava.net/Files/kdboy/2DChartXYPlot.rar ? 附录： 效果图 posted @ 2007-03-08 01:06 kdboy 阅读(278) | 评论 (0) | 编辑 收藏 2007年3月4日 ComponentOne WebChart的使用 - 2（对象介绍） ??? 接下来的文章主要介绍如何使用代码设置实现 WebChart 图表。在制作 WebChart 制作图表之前，首先了解以下 WebChart 的主要对象。熟悉了各对象的功能，站在一定高度使用 WebChar ，会使我们的设计事半功倍。 ?????? 一、 WebChart 的数据对象 ??? WebChart 中的数据对象有着特定的层级关系，如图： ??? 使用 WebChart 可以创建两个图表，每个图表对应一个 ChartGroup 。 ChartGroups 将这两个图表组织在 ChartGroupsCollection 中，通过 ChartGroup 的属性 ChartGroupsCollection 的下标索引或者使用 ChartGroups 中的属性 Group0 或 Group1 均可以返回其中一个图表，更简洁的你可以直接使用 ChartGroups 的下标索引也是同样效果。例： C1WebChart1.ChartGroups.ChartGroupsCollection[ 0 ]; C1WebChart1.ChartGroups.Group0; C1WebChart1.ChartGroups[ 0 ]; ??? 当然，在大多数情况下我们只需创建一个图表即可。在我们制作一些图表的时候会需要设置对象的 GroupIndex 属性，这里即为指定数据为哪个 ChartGroups 所有。通过 ChartGroup 对象，我们可以设置这个图表的样式、数据以及一些效果的显示。 ??? SeriesList 是该图表的数据序列的集合，它包含所有数据序列 ChartDataSeries 。每个序列对应最终生成的图表中的一组图形。例如，在折线图中创建 5 个数据序列，将会生成一个拥有 5 条折线的图表。 C1WebChart1.ChartGroups[ 0 ].ChartData.SeriesList[ 0 ];? // 获取图表第一个数据序列 ??? ChartDataSeries 是我们创建图表的至关重要的一个类，它不仅包含着图表的数据对象 PointData ，而且还可以通过它设置生成图表的样式和效果（这里的样式和效果仅指数据部分）。 ??? 图表的数据使用 ChartDataArray 存储，可以通过创建 ChartDataArray 对象，直接给图表的 XY 同时付值（使用属性 PiontData ），也可以分别给 X 或 Y 付值。例： C1WebChart1.ChartGroups[ 0 ].ChartData.SeriesList[ 0 ].PointData.CopyDataIn(data); ? 二、 WebChart