close

Chart控制項主要的部分由五個:

1.Annotations --圖形注解集合

2.ChartAreas  --圖表區域集合

3.Legends      --圖例集合

4.Series    --圖表序列集合(即圖表資料物件集合)

5.Titles    --圖示的標題集合

Annotations注解集合

 Annotations是一個對圖形的一些注解物件的集合,所謂注解物件,類似於對某個點的詳細或者批註的說明,比如,在圖片上實現各個節點的關鍵資訊,如下圖方框和黃色的小方框:

 

  一個圖形上可以擁有多個注解物件,可以添加十多種圖形樣式的注解物件,包括常見的箭頭、雲朵、矩行、圖片等等注解符號,通過各個注解物件的屬性,可以方便的設置注解物件的放置位置、呈現的顏色、大小、文字內容樣式等常見的屬性。(此屬性我在做程式的時候並沒有使用到,這是網上的相關解釋了)

ChartAreas圖表區域集合

CharAreas就是一個作圖的區域,一個Chart控制項可以有多個CharAreas集合,一個CharAreas集合中可以有多個Series圖示序列。

需要注意的是,繪圖區域只是一個可以作圖的區域範圍,它本身並不包含要作圖形的各種屬性資料。

    多繪圖區效果圖如下,分為上下兩個繪圖區域,分別表示不同的繪圖資料:

 

程式中的CharAreas屬性設置的代碼:

View Code

顯示圖形如下:

這裡比較鬱悶的是,在圖中有一條X軸,兩條Y軸,這樣就會出現三條軸線,我想設置一下表格線,剛開始是在設計頁面中點擊Chart控制項的屬性,但始終找不到如何設置,最會是在aspx頁面中進行設置的。

ChartAreas主要屬性如下:

ChartAreas:增加多個繪圖區域,每個繪圖區域包含獨立的圖表組、資料來源,用於多個圖表類型在一個繪圖區不相容時。

AlignmentOrientation:圖表區對齊方向,定義兩個繪圖區域間的對齊方式。

AlignmentStyle:圖表區對齊類型,定義圖表間用以對其的元素。

AlignWithChartArea:參照對齊的繪圖區名稱。

InnerPlotPosition:圖表在繪圖區內的位置屬性。

Auto:是否自動對齊。

Height:圖表在繪圖區內的高度(百分比,取值在0-100)

Width:圖表在繪圖區內的寬度(百分比,取值在0-100)

X,Y:圖表在繪圖區內左上角座標

Position:繪圖區位置屬性,同InnerPlotPosition。

Name:繪圖區名稱。

Axis:坐標軸集合

Title:坐標軸標題

TitleAlignment:坐標軸標題對齊方式

Interval:軸刻度間隔大小

IntervalOffset:軸刻度偏移量大小

MinorGrid:次要輔助線

MinorTickMark:次要刻度線

MajorGrid:主要輔助線

MajorTickMark:主要刻度線

DataSourceID:MSChart的資料來源。

Legends:圖例說明。

Palette:圖表外觀定義。

Legends圖例集合

  Legends是一個圖例的集合,即標注圖形中各個線條或顏色的含義

 此屬性主要設置圖表裡的一些說明性的東西,用到的不是太多。

Series圖表序列

     圖表序列,應該是整個繪圖中最關鍵的內容了,通俗點說,即是實際的繪圖資料區域,實際呈現的圖形形狀,就是由此集合中的每一個圖表來構成的,可以往集合裡面添加多個圖表,每一個圖表可以有自己的繪製形狀、樣式、獨立的資料等。

     需要注意的是,每一個圖表,你可以指定它的繪製區域(見ChartAreas的說明),讓此圖表呈現在某個繪圖區域,也可以讓幾個圖表在同一個繪圖區域疊加,如下圖:

 

 

上面兩幅圖,分別表示了把圖表放在不同的繪製區域和放在同一個繪製區域的情況。

Series的主要屬性:

IsValueShownAsLabel:是否顯示資料點標籤,如果為true,在圖表中顯示每一個資料值

Label:資料點標籤文本

LabelFormat:資料點標籤文本格式

LabelAngle:標籤字體角度

Name:圖表名稱

Points:資料點集合

XValueType:橫坐標軸類型

YValueType:縱坐標軸類型

XValueMember:橫坐標綁定的資料來源(如果資料來源為Table,則填寫橫坐標要顯示的欄位名稱)

YValueMembers:縱坐標綁定的資料來源(如果資料來源為Table,則填寫縱坐標要顯示的欄位名稱,縱坐標可以有兩個)

ChartArea:圖表所屬的繪圖區域名稱

ChartType:圖表類型(柱形、餅形、線形、點形等)

Legend:圖表使用的圖例名稱

Titles:標題集合。

width:MSChart的寬度。

height:MSChart的高度。

Titles標題合集

    根據字面含義即可以理解,是圖表的標題配置,同樣可以添加多個標題,以及設置標題的樣式及文字、位置等屬性。多看一下它的屬性即能明白各自的含義。

其它屬性

    相對來說,我覺得比較有用的屬性有三個,分別是:LabelTooltip以及Url連結。

    Label即標籤的含義,可以在圖片的關鍵位置進行一些關鍵數位或文字的描述,如下圖:

 

像上圖:X軸和Y軸的文字便是標籤,以及圖表曲線中的紅點上的文字,也是標籤,添加了標籤,可以讓人更容易的對內容進行理解。

    Tooltip即提示的含義,用於在各個關鍵點,如:標籤、圖形關鍵點、標題等當滑鼠移動上去的時候,提示用戶一些相關的詳細或說明資訊,例如上圖,可以給曲線中的每一個點增加Tooltip的屬性,寫上需要詳細說明的內容,比如:詳細的銷售明細,那麼,在滑鼠移動到這個點的時候,會自動彈出提示資訊。

    Tooltip可以支援簡單方式以及自訂的方式,簡單方式即像平時Html頁面設置的title之類的屬性效果,而自訂的方式,則可以實現圖形、文本等各種複雜的提示資訊顯示。詳細的方式請參考官方例子的:Interactivity and AJAX/Tooltips以及Interactivity and AJAX/Client Side Scripts下面的相關例子。

    Url連結,圖表控制項中,有一大半的控制項都有UrlTooltip的屬性,你可以設置此屬性,在滑鼠點擊的時候,代到其它相應的頁面去。

下面是本次專案中aspx頁面中有關Chart控制項設置的代碼(包含上面的ChartAreas):

 

View Code

  後臺的綁定代碼:

View Code

在此程式中第一個Y軸的刻度是可以動態變化的,但是X軸的刻度卻不然,於是我手動設置了X軸的間隔

ChReport.ChartAreas["ChartArea1"].AxisX.Interval = numInteval;//numInteval為要設置的間隔的值,double類型

要注意的是X軸和兩個Y軸的刻度範圍一定要設置(設置一個值就行<最大值或最小值>),不然會出現刻度範圍的回應錯誤(至少在我的程式中是這樣的),如下:

     double numMax = 2;
            double numMin = -2;
            double.TryParse(txtUpperSizeLimit.Text, out numMax);
            double.TryParse(txtLowerSizelimit.Text, out numMin);
            ChReport.ChartAreas[0].AxisX.Minimum = numMin;
            ChReport.ChartAreas[0].AxisX.Maximum = numMax;
            ChReport.ChartAreas[0].AxisY.Minimum = 0;
            ChReport.ChartAreas[0].AxisY2.Minimum = 0;

 

 

在第二個Y軸上要以百分比的形式顯示,但又不能直接實現,於是載入了Chart控制項的Customize方法

View Code

 

  這裡仍會有一個問題就是,如果你設置了Y軸上的百分比,即對Y軸上的刻度進行了設置,那麼就一定要在MSChart的綁定代碼中設置相對應的Y軸的最大值 (即某一個軸上的刻度值和最大值,要麼都設置,要麼都不設置,不然圖線上的數字不會和刻度值相匹配),上述代碼改為:

     double numMax = 2;
            double numMin = -2;
            double.TryParse(txtUpperSizeLimit.Text, out numMax);
            double.TryParse(txtLowerSizelimit.Text, out numMin);
            ChReport.ChartAreas[0].AxisX.Minimum = numMin;
            ChReport.ChartAreas[0].AxisX.Maximum = numMax;
            ChReport.ChartAreas[0].AxisY.Minimum = 0;
            ChReport.ChartAreas[0].AxisY2.Minimum = 0;

 

       ChReport.ChartAreas[0].AxisY2.Maximum = numPropMax;

 

在此次的程式中如果同時設置了Y軸的刻度和最大值,則會出現的一種狀況是系統會誤判Y軸Label的數量,和要顯示的刻度的數量不相等,,這樣也會造成表格中的點的顯示Y值和刻度值不一致,那麼就要讓表格內的點的Y座標和Y軸的刻度對應,設置代碼如下:

System.Web.UI.DataVisualization.Charting.CustomLabelsCollection yAxisLabels = ChReport.ChartAreas["ChartArea1"].AxisY2.CustomLabels;
ChReport.ChartAreas[0].AxisY2.Interval =Math.Round( (numPropMax / (yAxisLabels.Count-1)),numDigit);

完整的後臺代碼如下:

View Code

 

OnInit是是個頁面生命週期中的一個,完整的頁面週期如下:

View Code

 

View Code

程式中用到了兩個方法,但並不包含在Math中,我自己寫了出來,以後可能還會用到的吧。

View Code

做一個程式,用到了規則運算式的一些東西,不會,就去學習,有用到Excel表格的操作,不太懂,再去看了看怎樣操作,期間有關正態分佈函數 NORMDIST會不會大於1的問題,不懂,研究了小半天,親,這都是高中學的概率分佈和大一時的高數微積分啊,汗顏啊。MSChart的東西也是從0開 始,像我這樣功底不好的程式師做程式設計真心傷不起啊。

 

arrow
arrow
    全站熱搜

    Joe Joe 發表在 痞客邦 留言(0) 人氣()