ComponentOne WebChart的使用 - 4（饼图）

这次演示饼图制作，简单介绍饼图的样式效果及 PlotArea 对象的一些属性。

[b]一、生成饼图[/b]
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 值即可，所有序列的相同索引的数据组合成一个饼图。这里将每一条数据放在一个新的数据序列里，并且每个序列都只有一个元素。这样，所有数据就会呈现在一个饼图中。如图：
[img]http://kdboy.bokee.com/inc/ChartPie1.png[/img]
这个就是默认的饼图样式，是不是少点什么呢？
接下来，介绍样式的设置。

[b]二、饼图样式设计[/b]
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 是指序列中的元素索引。
设置完成，效果图如下：
[img]http://kdboy.bokee.com/inc/ChartPie2.png[/img]

[b]三、 3D 效果的实现。 [/b]
1 ）开启 3D 效果。
C1WebChart1.ChartGroups[ 0 ].Use3D = true ;
以 3D 样式显示，该步骤必须存在。

2） 设置 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属性来设置。 

主要就是以上四个属性的设置。
显示效果如下：
[img]http://kdboy.bokee.com/inc/ChartPie3.png[/img]

[b]四、补充概念[/b]
或许之前说到的各图形区域比较容易混淆，下面以图形介绍个图形区域：
[img]http://kdboy.bokee.com/inc/ChartPie4.png[/img]
灰色 为整个 WebChart 区域，对应对象就是 this.C1WebChart1 。
桔黄色 为图表区域，对应对象为 this.C1WebChart1.ChartArea 。
绿色 为绘图区，对应对象为 this.C1WebChart1.ChartArea.PlotArea 。
红色 为图表的上标题，对应对象为 this.C1WebChart1.Header 。
蓝色 为图表的下标题，对应对象为 this.C1WebChart1.Footer 。

使用相关对象可以设置个区域的样式效果。了解这些可以使用属性窗口快速设置一些简单样式。

[b]五、结束[/b]
我希望通过一些实例能够比较全面的介绍 WebChart 的主要对象的使用。在下一次，会演示柱形图的制作。本次实例的完整代码下载地址如下：
http://www.blogjava.net/Files/kdboy/ChartPie.rar