2007年3月8日
系列最后一章，柱形圖的制作
。
?
一、
生成柱形圖
C1WebChart1.ChartGroups.Group0.ChartType?
=
?Chart2DTypeEnum.Bar;
設(shè)置圖表類型。
?
對(duì)于數(shù)據(jù)源的添加和其他圖表相同，這里就不再說明。
?
二、
柱形圖的樣式設(shè)計(jì)
1
）填充色的改變
ChartDataSeries?series1?
=
??C1WebChart1.ChartGroups[
0
].ChartData.SeriesList.AddNewSeries();
series1.FillStyle.Color1?
=
?Color.Red;
獲取了
ChartDataSeries
對(duì)象之后，設(shè)置
FillStayle
的
Color1
屬性即會(huì)改變柱形的填充色。
?
2
）漸變色彩的實(shí)現(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.aygfsteel.com/Files/kdboy/ChartBar1.rar
?
?
3
）多種顏色填充效果
說明：對(duì)于同一序列的柱形只能使用相同填充顏色，實(shí)現(xiàn)多種顏色填充，只能使用不同數(shù)據(jù)序列。所以，假如你只有一組數(shù)據(jù)，那么可以使用這種效果來制作圖表。
?
//
1、需設(shè)置圖表為疊加樣式：Stacked設(shè)為ture?（否則所有系列將單列顯示，柱形圖會(huì)變細(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è)置序列長(zhǎng)度為1（即每條序列均只有一條數(shù)據(jù)），這點(diǎn)與餅圖設(shè)置相同
???????series.PointData.Length?
=
?
1
;
???????
//
設(shè)置每個(gè)序列所在x軸位置，讓每個(gè)序列獨(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)會(huì)自動(dòng)分配。也可以在這里設(shè)置每個(gè)序列的顏色。
?
效果圖如下：
多種顏色填充
源碼下載地址：
http://www.aygfsteel.com/Files/kdboy/ChartBar2.rar
?
?
三、
柱形圖的
3D
效果
與餅圖的
3D
效果相同，只需增加一下代碼即可：
//
設(shè)置3D效果
C1WebChart1.ChartGroups[
0
].Use3D?
=
?
true
;
//
3D圖形的深度
C1WebChart1.ChartArea.PlotArea.View3D.Depth?
=
10
;
//
以y軸作為參照的?旋轉(zhuǎn)角度（這里可以看到這個(gè)屬性的效果）
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;
?
效果圖如下：
源碼略。
?
四、
其他。
對(duì)于柱形圖的邊線，可以設(shè)置
ChartGroup
的
ShowOutline
屬性來禁止顯示。改變其顏色，我也不知如何設(shè)置。
代碼如下：
C1WebChart1.ChartGroups[
0
].ShowOutline?
=
?
false
;
效果就是這樣：
?
五、
結(jié)束
關(guān)于
WebChart
就介紹到這里，謝謝關(guān)注。
這次演示餅圖制作，簡(jiǎn)單介紹餅圖的樣式效果及
PlotArea
對(duì)象的一些屬性。
?
一、生成餅圖
C1WebChart1.ChartGroups.Group0.ChartType?
=
?Chart2DTypeEnum.Pie;
設(shè)置圖表類型。?
?
DataSet?ds?
=
?GetDataSet();
DataView?dv?
=
?
new
?DataView(ds.Tables[
"
sanguo
"
]);
//
清除圖表所有數(shù)據(jù)序列
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());
}
為圖表添加數(shù)據(jù)。
這里與折線圖不同的是餅圖只需設(shè)置坐標(biāo)軸的
Y
值即可，所有序列的相同索引的數(shù)據(jù)組合成一個(gè)餅圖。這里將每一條數(shù)據(jù)放在一個(gè)新的數(shù)據(jù)序列里，并且每個(gè)序列都只有一個(gè)元素。這樣，所有數(shù)據(jù)就會(huì)呈現(xiàn)在一個(gè)餅圖中。如圖：
這個(gè)就是默認(rèn)的餅圖樣式，是不是少點(diǎn)什么呢？
接下來，介紹樣式的設(shè)置。
?
二、餅圖樣式設(shè)計(jì)
1）?
添加圖例
C1WebChart1.Legend.Visible?
=
?
true
;
設(shè)置
Legend
對(duì)象的
Visible
屬性為
true
，圖例就會(huì)顯示出來。這時(shí)圖例的標(biāo)簽?zāi)J(rèn)為序列的名稱。
?
for
(
int
?i
=
0
;?i?
<
?dv.Count;?i
++
)
{
???????ChartDataSeries?series?
=
?C1WebChart1.ChartGroups[
0
].ChartData.SeriesList[i];
???????series.Label
=
dv[i][
"
name
"
].ToString();
}
設(shè)置圖例標(biāo)簽的顯示內(nèi)容。為了代碼簡(jiǎn)潔也可以在添加數(shù)據(jù)的同時(shí)設(shè)置。
?
另外，我們還可以使用
Legend
對(duì)象（圖例對(duì)象）設(shè)置圖例的顯示樣式。如：
C1WebChart1.Legend.Compass?
=
?CompassEnum.West;
設(shè)置圖例顯示位置。
?
其他一些屬性，例如
Orientation
設(shè)置圖例顯示方向（以縱向顯示或橫向顯示）等，不作詳細(xì)介紹，可自己嘗試使用。
?
2）?
為了讓數(shù)據(jù)更加直觀，可在餅圖添加標(biāo)簽
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
;
}
首先，實(shí)例化標(biāo)簽并設(shè)置標(biāo)簽內(nèi)容及相關(guān)屬性。
然后使用
AttachMethodData
對(duì)象設(shè)置標(biāo)簽附加在圖表中的位置。
GroupIndex
是指圖表索引。（第一篇文章提到過
WebChart
默認(rèn)支持
2
個(gè)圖表）
SeriesIndex
是指序列索引。
PointIndex?
是指序列中的元素索引。
?
設(shè)置完成，效果圖如下：
?
三、
3D
效果的實(shí)現(xiàn)
。
1
）開啟
3D
效果。
C1WebChart1.ChartGroups[
0
].Use3D?
=
?
true
;
以
3D
樣式顯示，該步驟必須存在。
?
3）?
設(shè)置
3D
樣式
//
3D圖形的深度
C1WebChart1.ChartArea.PlotArea.View3D.Depth?
=
20
;
//
以y軸作為參照的?旋轉(zhuǎn)角度(只有x軸，這個(gè)屬性設(shè)置無效)
C1WebChart1.ChartArea.PlotArea.View3D.Rotation?
=
90
;
//
以x軸作為參照的?傾斜角度
C1WebChart1.ChartArea.PlotArea.View3D.Elevation?
=
30
;
//
設(shè)置3D圖形的陰影效果
C1WebChart1.ChartArea.PlotArea.View3D.Shading?
=
?ShadingEnum.ColorDark;
3D
樣式是使用
PlotArea
對(duì)象的View3D屬性來設(shè)置。
主要就是以上四個(gè)屬性的設(shè)置。
顯示效果如下：
?
四、補(bǔ)充概念
或許之前說到的各圖形區(qū)域比較容易混淆，下面以圖形介紹個(gè)圖形區(qū)域：
?
灰色
為整個(gè)
WebChart
區(qū)域，對(duì)應(yīng)對(duì)象就是
this.C1WebChart1
。
桔黃色
為圖表區(qū)域，對(duì)應(yīng)對(duì)象為
this.C1WebChart1.ChartArea
。
綠色
為繪圖區(qū)，對(duì)應(yīng)對(duì)象為
this.C1WebChart1.ChartArea.PlotArea
。
紅色
為圖表的上標(biāo)題，對(duì)應(yīng)對(duì)象為
this.C1WebChart1.Header
。
藍(lán)色
為圖表的下標(biāo)題，對(duì)應(yīng)對(duì)象為
this.C1WebChart1.Footer
。
?
使用相關(guān)對(duì)象可以設(shè)置個(gè)區(qū)域的樣式效果。了解這些可以使用屬性窗口快速設(shè)置一些簡(jiǎn)單樣式。
?
五、結(jié)束
我希望通過一些實(shí)例能夠比較全面的介紹
WebChart
的主要對(duì)象的使用。在下一次，會(huì)演示柱形圖的制作。本次實(shí)例的完整代碼下載地址如下：
?http://www.aygfsteel.com/Files/kdboy/ChartPie.rar
???
本篇文章將演示如何使用
WebChart
制作折線圖。并通過示例介紹數(shù)據(jù)對(duì)象一些相關(guān)屬性以及
ChartArea
的
Axis
的相關(guān)屬性設(shè)置，并演示使用
WebChart
做交互式的設(shè)計(jì)。
???
注：版本
ComponentOne.Studio.Enterprise.2006.v2?
???
????環(huán)境
.NET Compact Framework 1.1
?
一、生成折線圖
1)
獲取
WebChart
的第一個(gè)圖標(biāo)，并設(shè)置其圖表類型為折線圖
C1WebChart1.ChartGroups[
0
].ChartType?
=
?Chart2DTypeEnum.XYPlot;
2)
為圖表添加數(shù)據(jù)
DataSet?ds?
=
?GetDataSet();
獲取數(shù)據(jù)。這里可以根據(jù)自己的業(yè)務(wù)需求，或自動(dòng)生成或查詢數(shù)據(jù)庫，返回一個(gè)
DataSet
對(duì)象。
DataView?dv?
=
?
new
?DataView(ds.Tables[
"
sanguo
"
]);
PointF[]?data?
=
?(PointF[])Array.CreateInstance(
typeof
(PointF),?dv.Count);
int
?i;
for
(i
=
0
;?i?
<
?data.Length;?i
++
)
{
??????float
?y?
=
?
float
.Parse(dv[i][
"
value
"
].ToString());
??????data[i]?
=
?
new
?PointF(i,?y);
}
將數(shù)據(jù)封裝在
PointF
類型的對(duì)象數(shù)組中。這里可以使用任何方式封裝數(shù)據(jù)。
?
//
清除圖表所有數(shù)據(jù)序列
C1WebChart1.ChartGroups[
0
].ChartData.SeriesList.Clear();
//
創(chuàng)建一個(gè)新的數(shù)據(jù)序列，并設(shè)置數(shù)據(jù)
ChartDataSeries?series?
=
?C1WebChart1.ChartGroups[
0
].ChartData.SeriesList.AddNewSeries();
WebChart
默認(rèn)會(huì)有
4
個(gè)數(shù)據(jù)序列，為了不讓其他序列影響輸出效果，清除序列集合中的所有序列，并且創(chuàng)建一個(gè)新的序列。
?
series.PointData.CopyDataIn(data);
將數(shù)據(jù)添加至新建的數(shù)據(jù)序列中。這里使用
PointData
屬性，同時(shí)為
X
、
Y
坐標(biāo)付值。
?
到這里，我們便可以運(yùn)行程序，看到一個(gè)有我們的數(shù)據(jù)生成的一個(gè)默認(rèn)樣式的折線圖。下面來介紹使用
ChartDataSeries
對(duì)象設(shè)置圖形的樣式。
?
二、使用
ChartDataSeries
對(duì)象設(shè)置折線圖樣式
關(guān)于
ChartDataSeries
對(duì)象，之前已作了簡(jiǎn)單介紹，這里直接以代碼介紹其部分屬性。
series.FitType?
=
?FitTypeEnum.Spline;
設(shè)置折線為平滑曲線。
series.LineStyle.Color?
=
?Color.Red;
設(shè)置折線顏色為紅色。
LineStyle
的相關(guān)屬性：
Pattern -
設(shè)置折線的類型
（實(shí)心直線、點(diǎn)線等），其值為
LinePatternEnum
枚舉類型。
Thickness –
設(shè)置折線厚度
series.SymbolStyle.Shape?
=
?SymbolShapeEnum.InvertedTri;
series.SymbolStyle.Color?
=
?Color.Blue;
設(shè)置折線上數(shù)據(jù)點(diǎn)的符號(hào)形狀為倒三角，顏色為藍(lán)色。
還可以通過
SymbolStyle
設(shè)置符號(hào)的大小，符號(hào)邊線的顏色及厚度。可以自己嘗試。
?
三、坐標(biāo)軸的設(shè)置
Axis?ax?
=
?C1WebChart1.ChartArea.AxisX;
獲取圖表的
X
坐標(biāo)軸。
?
ax.AnnoMethod?
=
?AnnotationMethodEnum.ValueLabels;?
設(shè)置坐標(biāo)軸刻度標(biāo)簽顯示方式，這里使用
ValueLabels
，有用戶來制定標(biāo)簽內(nèi)容。默認(rèn)為
Values
模式，有系統(tǒng)自動(dòng)標(biāo)注標(biāo)簽內(nèi)容。
for
(i?
=
?
0
;?i?
<
?data.Length;?i
++
)
{
??????DataRowView?drv?
=
?dv[i];
??????ax.ValueLabels.Add(i,?(
string
)drv[
"
name
"
]);
}
設(shè)置坐標(biāo)軸刻度標(biāo)簽顯示內(nèi)容。
ax.ValueLabels.Add
的第一個(gè)參數(shù)為圖表數(shù)據(jù)的
x
值，第二個(gè)參數(shù)為對(duì)應(yīng)顯示的標(biāo)簽文本。
?
ax.AnnotationRotation?
=
?
-
60
;
設(shè)置刻度標(biāo)簽的旋轉(zhuǎn)角度。
對(duì)于標(biāo)簽內(nèi)容還可以使用屬性
AnnoFormatString
來設(shè)置內(nèi)容的格式。
ax.Text?
=
?
"
X?坐標(biāo)軸?
"
;
設(shè)置坐標(biāo)軸標(biāo)題。
ax.Rotation?
=
?RotationEnum.Rotate90;
設(shè)置坐標(biāo)軸標(biāo)題的旋轉(zhuǎn)角度。當(dāng)坐標(biāo)軸標(biāo)題設(shè)置以后生效。
對(duì)于坐標(biāo)軸標(biāo)題，還可以設(shè)置它的
對(duì)齊方式，使用屬性
Alignment
。
?
ax.Max?
=
?data.Length?
-
?.
5
;
設(shè)置坐標(biāo)軸的最大長(zhǎng)度
相應(yīng)的還有
Min
屬性設(shè)置坐標(biāo)軸的最小長(zhǎng)度，
Origin
屬性
設(shè)置坐標(biāo)軸原點(diǎn)。對(duì)應(yīng)這些，還有
AutoMax
、
AutoMin
、
AutoOrigin
等
bool
類型的屬性，表示是否自動(dòng)設(shè)置。
對(duì)于刻度值的也有類似屬性：
UnitMajor
、
UnitMinor
設(shè)置主、副刻度的單位長(zhǎng)度。以及對(duì)應(yīng)的
auto
屬性等。
?
除此之外，還有一些特殊屬性：
Reverse
屬性：使坐標(biāo)軸反轉(zhuǎn)。
ScrollBar
屬性：為坐標(biāo)軸添加滾動(dòng)條。
Visible
屬性：可以隱藏坐標(biāo)軸。
OnTop
屬性：可以設(shè)置坐標(biāo)軸顯示在圖表上方。
等等。
在我們使用
.NET
開發(fā)環(huán)境中，會(huì)有智能感知的相關(guān)提示，對(duì)于對(duì)象屬性的使用會(huì)簡(jiǎn)單得多。這里只介紹了主要的屬性，其他屬性可根據(jù)需要自行嘗試。
?
四、交互式設(shè)計(jì)
C1WebChart1.ImageAreas.GetByName(
"
ChartArea
"
).href
=
"
http://kdboy.spaces.live.com
"
?temp_href
=
"
http://kdboy.spaces.live.com
"
;
為圖表區(qū)域增加鏈接。
C1WebChart1.ImageAreas.GetByName(
"
ChartData
"
).Tooltip?
=
?
"
X={#XVAL},?Y={#YVAL:c}
"
;
為折線上的數(shù)據(jù)點(diǎn)增加鼠標(biāo)提示。（鼠標(biāo)移至數(shù)據(jù)點(diǎn)的符號(hào)上，會(huì)提示你所設(shè)置文本）
C1WebChart1.ImageAreas.GetByName(
"
Footer
"
).Attributes?
=
?
"
onclick=window.open('http://kdboy.spaces.live.com')
"
;
為圖表底部添加點(diǎn)擊事件。
?
五、補(bǔ)充
C1WebChart1.Footer.Text?
=
?
"
Web?Chart?Test!
"
;
C1WebChart1.Footer.Visible?
=
?
true
;
這里設(shè)置圖標(biāo)下標(biāo)題，并讓圖表
Footer
區(qū)域顯示在圖表中。
對(duì)于
C1WebChart
的相關(guān)屬性比較簡(jiǎn)單，不再一一演示。
?
六、結(jié)束
以上是折線圖的部分代碼，完整示例可以通過下面鏈接下載。
下載地址：http://www.aygfsteel.com/Files/kdboy/2DChartXYPlot.rar
?
附錄：
效果圖
