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