???
本篇文章將演示如何使用
WebChart
制作折線圖。并通過示例介紹數(shù)據(jù)對象一些相關(guān)屬性以及
ChartArea
的
Axis
的相關(guān)屬性設(shè)置，并演示使用
WebChart
做交互式的設(shè)計。
???
注：版本
ComponentOne.Studio.Enterprise.2006.v2?
???
????環(huán)境
.NET Compact Framework 1.1
?
一、生成折線圖
1)
獲取
WebChart
的第一個圖標(biāo)，并設(shè)置其圖表類型為折線圖
C1WebChart1.ChartGroups[
0
].ChartType?
=
?Chart2DTypeEnum.XYPlot;
2)
為圖表添加數(shù)據(jù)
DataSet?ds?
=
?GetDataSet();
獲取數(shù)據(jù)。這里可以根據(jù)自己的業(yè)務(wù)需求，或自動生成或查詢數(shù)據(jù)庫，返回一個
DataSet
對象。
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
類型的對象數(shù)組中。這里可以使用任何方式封裝數(shù)據(jù)。
?
//
清除圖表所有數(shù)據(jù)序列
C1WebChart1.ChartGroups[
0
].ChartData.SeriesList.Clear();
//
創(chuàng)建一個新的數(shù)據(jù)序列，并設(shè)置數(shù)據(jù)
ChartDataSeries?series?
=
?C1WebChart1.ChartGroups[
0
].ChartData.SeriesList.AddNewSeries();
WebChart
默認(rèn)會有
4
個數(shù)據(jù)序列，為了不讓其他序列影響輸出效果，清除序列集合中的所有序列，并且創(chuàng)建一個新的序列。
?
series.PointData.CopyDataIn(data);
將數(shù)據(jù)添加至新建的數(shù)據(jù)序列中。這里使用
PointData
屬性，同時為
X
、
Y
坐標(biāo)付值。
?
到這里，我們便可以運(yùn)行程序，看到一個有我們的數(shù)據(jù)生成的一個默認(rèn)樣式的折線圖。下面來介紹使用
ChartDataSeries
對象設(shè)置圖形的樣式。
?
二、使用
ChartDataSeries
對象設(shè)置折線圖樣式
關(guān)于
ChartDataSeries
對象，之前已作了簡單介紹，這里直接以代碼介紹其部分屬性。
series.FitType?
=
?FitTypeEnum.Spline;
設(shè)置折線為平滑曲線。
series.LineStyle.Color?
=
?Color.Red;
設(shè)置折線顏色為紅色。
LineStyle
的相關(guān)屬性：
Pattern -
設(shè)置折線的類型
（實心直線、點線等），其值為
LinePatternEnum
枚舉類型。
Thickness –
設(shè)置折線厚度
series.SymbolStyle.Shape?
=
?SymbolShapeEnum.InvertedTri;
series.SymbolStyle.Color?
=
?Color.Blue;
設(shè)置折線上數(shù)據(jù)點的符號形狀為倒三角，顏色為藍(lán)色。
還可以通過
SymbolStyle
設(shè)置符號的大小，符號邊線的顏色及厚度。可以自己嘗試。
?
三、坐標(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)自動標(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
的第一個參數(shù)為圖表數(shù)據(jù)的
x
值，第二個參數(shù)為對應(yīng)顯示的標(biāo)簽文本。
?
ax.AnnotationRotation?
=
?
-
60
;
設(shè)置刻度標(biāo)簽的旋轉(zhuǎn)角度。
對于標(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è)置以后生效。
對于坐標(biāo)軸標(biāo)題，還可以設(shè)置它的
對齊方式，使用屬性
Alignment
。
?
ax.Max?
=
?data.Length?
-
?.
5
;
設(shè)置坐標(biāo)軸的最大長度
相應(yīng)的還有
Min
屬性設(shè)置坐標(biāo)軸的最小長度，
Origin
屬性
設(shè)置坐標(biāo)軸原點。對應(yīng)這些，還有
AutoMax
、
AutoMin
、
AutoOrigin
等
bool
類型的屬性，表示是否自動設(shè)置。
對于刻度值的也有類似屬性：
UnitMajor
、
UnitMinor
設(shè)置主、副刻度的單位長度。以及對應(yīng)的
auto
屬性等。
?
除此之外，還有一些特殊屬性：
Reverse
屬性：使坐標(biāo)軸反轉(zhuǎn)。
ScrollBar
屬性：為坐標(biāo)軸添加滾動條。
Visible
屬性：可以隱藏坐標(biāo)軸。
OnTop
屬性：可以設(shè)置坐標(biāo)軸顯示在圖表上方。
等等。
在我們使用
.NET
開發(fā)環(huán)境中，會有智能感知的相關(guān)提示，對于對象屬性的使用會簡單得多。這里只介紹了主要的屬性，其他屬性可根據(jù)需要自行嘗試。
?
四、交互式設(shè)計
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ù)點增加鼠標(biāo)提示。（鼠標(biāo)移至數(shù)據(jù)點的符號上，會提示你所設(shè)置文本）
C1WebChart1.ImageAreas.GetByName(
"
Footer
"
).Attributes?
=
?
"
onclick=window.open('http://kdboy.spaces.live.com')
"
;
為圖表底部添加點擊事件。
?
五、補(bǔ)充
C1WebChart1.Footer.Text?
=
?
"
Web?Chart?Test!
"
;
C1WebChart1.Footer.Visible?
=
?
true
;
這里設(shè)置圖標(biāo)下標(biāo)題，并讓圖表
Footer
區(qū)域顯示在圖表中。
對于
C1WebChart
的相關(guān)屬性比較簡單，不再一一演示。
?
六、結(jié)束
以上是折線圖的部分代碼，完整示例可以通過下面鏈接下載。
下載地址：http://m.tkk7.com/Files/kdboy/2DChartXYPlot.rar
?
附錄：
效果圖
posted on 2007-03-08 01:06
kdboy 閱讀(2385)
評論(4) 編輯 收藏 所屬分類:
ASP.NET