随笔-5  评论-13  文章-0  trackbacks-0

系列最后一章,柱形图的制作

 

一、 生成柱形图

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 on 2007-05-07 16:05 kdboy 阅读(3894) 评论(3)  编辑  收藏 所属分类: ASP.NET

评论:
# re: ComponentOne WebChart的使用 - 5(柱形图) 2007-08-10 09:35 | dreamstone
写的不错,收藏了  回复  更多评论
  
# re: ComponentOne WebChart的使用 - 5(柱形图) 2008-06-06 09:11 | 清云
楼主你好,请问如果需要显示的个数比较少的时候,如何限制每个柱子的宽度,可以设置吗?谢谢!  回复  更多评论
  
# re: ComponentOne WebChart的使用 - 5(柱形图) 2008-06-06 10:14 | kdboy
@清云
我不记得在哪里可以设置柱形的宽度,现在也没有.Net的环境查看。
你可以设置坐标的最大值及单位值试一下,柱形的宽度会根据坐标设置的不同而改变。  回复  更多评论
  

只有注册用户登录后才能发表评论。


网站导航: