2007年3月8日随笔档案 - Fly In Sky

2007年3月8日

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 阅读(3894) | 评论 (3) | 编辑收藏

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 阅读(1625) | 评论 (0) | 编辑收藏

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 = " onclick=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 阅读(2369) | 评论 (4) | 编辑收藏

常用链接

留言簿(5)

随笔分类(6)

随笔档案(5)

收藏夹(3)

kdboy

程序设计

搜索

积分与排名

最新评论

阅读排行榜

评论排行榜