ComponentOne WebChart的使用 - 5（柱形图） -CSDN博客

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

[b]一、生成柱形图[/b]
C1WebChart1.ChartGroups.Group0.ChartType = Chart2DTypeEnum.Bar;
设置图表类型。

对于数据源的添加和其他图表相同，这里就不再说明。

[b]二、柱形图的样式设计[/b]
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 属性。

渐变效果图如下：
[img]http://kdboy.bokee.com/inc/ChartBar1.png[/img]
渐变效果源码下载地址：
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();
}

其次，需要将每条数据放置在不同的数据序列中，该序列颜色系统会自动分配。也可以在这里设置每个序列的颜色。

效果图如下：
[img]http://kdboy.bokee.com/inc/ChartBar2.png[/img]
多种颜色填充源码下载地址：
http://www.blogjava.net/Files/kdboy/ChartBar2.rar

[b]三、柱形图的 3D 效果[/b]
与饼图的 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;

效果图如下：
[img]http://kdboy.bokee.com/inc/ChartBar3.png[/img]
源码略。

[b]四、其他。[/b]
对于柱形图的边线，可以设置 ChartGroup 的 ShowOutline 属性来禁止显示。改变其颜色，我也不知如何设置。
代码如下：
C1WebChart1.ChartGroups[ 0 ].ShowOutline = false ;
效果就是这样：
[img]http://kdboy.bokee.com/inc/ChartBar4.png[/img]

[b]五、结束[/b]
关于 WebChart 就介绍到这里，谢谢关注。