系列最后一章，柱形圖的制作
。
?
一、
生成柱形圖
C1WebChart1.ChartGroups.Group0.ChartType?
=
?Chart2DTypeEnum.Bar;
設(shè)置圖表類型。
?
對于數(shù)據(jù)源的添加和其他圖表相同，這里就不再說明。
?
二、
柱形圖的樣式設(shè)計
1
）填充色的改變
ChartDataSeries?series1?
=
??C1WebChart1.ChartGroups[
0
].ChartData.SeriesList.AddNewSeries();
series1.FillStyle.Color1?
=
?Color.Red;
獲取了
ChartDataSeries
對象之后，設(shè)置
FillStayle
的
Color1
屬性即會改變柱形的填充色。
?
2
）漸變色彩的實現(xiàn)
//
1、設(shè)置圖表顏色填充方式為漸變方式：設(shè)置FillType?為Gradient（默認(rèn)為SolidColor方式，單一色填充）
series1.FillStyle.FillType?
=
FillTypeEnum.Gradient;
//
2、設(shè)置漸變效果的樣式：設(shè)置GradientStyle為GradientStyleEnum的枚舉值，這里設(shè)置為垂直漸變
series1.FillStyle.GradientStyle?
=
?GradientStyleEnum.Horizontal;
//
3、設(shè)置漸變顏色：Color1為圖表默認(rèn)顏色，如果使用默認(rèn)方式填充，圖標(biāo)顏色將為Color的顏色。
series1.FillStyle.Color1?
=
?Color.BurlyWood;
//
Color2為漸變色彩（使用Gradient或Hatch方式填充圖表顏色需設(shè)置Color2）。
series1.FillStyle.Color2?
=
?Color.Red;
漸變效果需要設(shè)置
FillType
為
Gradient
類型，并且必須設(shè)置
Color2
屬性。
?
漸變效果圖如下：
漸變效果源碼下載地址：
http://www.tkk7.com/Files/kdboy/ChartBar1.rar
?
?
3
）多種顏色填充效果
說明：對于同一序列的柱形只能使用相同填充顏色，實現(xiàn)多種顏色填充，只能使用不同數(shù)據(jù)序列。所以，假如你只有一組數(shù)據(jù)，那么可以使用這種效果來制作圖表。
?
//
1、需設(shè)置圖表為疊加樣式：Stacked設(shè)為ture?（否則所有系列將單列顯示，柱形圖會變細(xì)）
C1WebChart1.ChartGroups.Group0.Stacked?
=
?
true
;
首先，需要設(shè)置圖標(biāo)為疊加樣式。
?
//
2、類似餅圖設(shè)置，為每條柱形圖創(chuàng)建序列
for
(
int
?i
=
0
;?i?
<
?dv.Count;?i
++
)
{
???????ChartDataSeries?series?
=
?C1WebChart1.ChartGroups[
0
].ChartData.SeriesList.AddNewSeries();
???????
//
設(shè)置序列長度為1（即每條序列均只有一條數(shù)據(jù)），這點(diǎn)與餅圖設(shè)置相同
???????series.PointData.Length?
=
?
1
;
???????
//
設(shè)置每個序列所在x軸位置，讓每個序列獨(dú)立顯示。與餅圖設(shè)置，只有這點(diǎn)區(qū)別。
???????series.X[
0
]?
=
?i;
???????
//
設(shè)置數(shù)據(jù)序列的y值
???????series.Y[
0
]?
=
?
float
.Parse(dv[i][
"
value
"
].ToString());?????????????????????????
???????
//
設(shè)置序列圖例顯示文字。
???????series.Label
=
dv[i][
"
name
"
].ToString();
}
其次，需要將每條數(shù)據(jù)放置在不同的數(shù)據(jù)序列中，該序列顏色系統(tǒng)會自動分配。也可以在這里設(shè)置每個序列的顏色。
?
效果圖如下：
多種顏色填充
源碼下載地址：
http://www.tkk7.com/Files/kdboy/ChartBar2.rar
?
?
三、
柱形圖的
3D
效果
與餅圖的
3D
效果相同，只需增加一下代碼即可：
//
設(shè)置3D效果
C1WebChart1.ChartGroups[
0
].Use3D?
=
?
true
;
//
3D圖形的深度
C1WebChart1.ChartArea.PlotArea.View3D.Depth?
=
10
;
//
以y軸作為參照的?旋轉(zhuǎn)角度（這里可以看到這個屬性的效果）
C1WebChart1.ChartArea.PlotArea.View3D.Rotation?
=
20
;
//
以x軸作為參照的?傾斜角度
C1WebChart1.ChartArea.PlotArea.View3D.Elevation?
=
30
;
//
設(shè)置3D圖形的陰影效果，默認(rèn)是ColorDark(比前景色深)，還可以指定為ColorLight(比前景色淺)，None(不指定，顏色深淺一樣)
C1WebChart1.ChartArea.PlotArea.View3D.Shading?
=
?ShadingEnum.ColorDark;
?
效果圖如下：
源碼略。
?
四、
其他。
對于柱形圖的邊線，可以設(shè)置
ChartGroup
的
ShowOutline
屬性來禁止顯示。改變其顏色，我也不知如何設(shè)置。
代碼如下：
C1WebChart1.ChartGroups[
0
].ShowOutline?
=
?
false
;
效果就是這樣：
?
五、
結(jié)束
關(guān)于
WebChart
就介紹到這里，謝謝關(guān)注。
posted on 2007-05-07 16:05
kdboy 閱讀(3908)
評論(3) 編輯 收藏 所屬分類:
ASP.NET