2007年3月21日
系列最后一章，柱形圖的制作
。
?
一、
生成柱形圖
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.aygfsteel.com/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.aygfsteel.com/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 閱讀(3913) |
評論 (3) |
編輯 收藏
這次演示餅圖制作，簡單介紹餅圖的樣式效果及
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.aygfsteel.com/Files/kdboy/ChartPie.rar
posted @
2007-03-21 22:03 kdboy 閱讀(1643) |
評論 (0) |
編輯 收藏