chart绑定mysql数据源_MSChart图表之Chart组件 学习一篇(5个主要属性+数据源绑定)...
前沿:簡單練習效果----
一、5大屬性簡介:
整個圖形控件主要由以下幾個部份組成:1.Annotations
--圖形注解集合
2.ChartAreas
--圖表區域集合
3.Legends --圖例集合
4.Series
--圖表序列集合(即圖表數據對象集合)
5.Titles --圖標的標題集合
Annotations注解集合
Annotations是一個對圖形的一些注解對象的集合,所謂注解對象,類似于對某個點的詳細或者批注的說明,比如,在圖片上實現各個節點的關鍵信息,如下圖方框和黃色的小方框:
一個圖形上可以擁有多個注解對象,可以添加十多種圖形樣式的注解對象,包括常見的箭頭、云朵、矩行、圖片等等注解符號,通過各個注解對象的屬性,可以方便的設置注解對象的放置位置、呈現的顏色、大小、文字內容樣式等常見的屬性。ChartAreas圖表區域集合
ChartAreas可以理解為是一個圖表的繪圖區,例如,你想在一幅圖上呈現兩個不同屬性的內容,一個是用戶流量,另一個則是系統資源占用情況,那么你要在一個圖形上繪制這兩種情況,明顯是不合理的,對于這種情況,可以建立兩個ChartArea,一個用于呈現用戶流量,另一個則用于呈現系統資源的占用情況。
當然了,圖表控件并不限制你添加多少個繪圖區域,你可以根據你的需要進行添加。對于每一個繪圖區域,你可以設置各自的屬性,如:X,Y軸屬性、背景等。
需要注意的是,繪圖區域只是一個可以作圖的區域范圍,它本身并不包含要作圖形的各種屬性數據。
多繪圖區效果圖如下,分為上下兩個繪圖區域,分別表示不同的繪圖數據:
ChartAreas顯示類型有2:默認是2D,其一是3D。具體設置參照:
Legends圖例集合
Legends是一個圖例的集合,即標注圖形中各個線條或顏色的含義,同樣,一個圖片也可以包含多個圖例說明,比如像上面說的多個圖表區域的方式,則可以建立多個圖例,分別說明各個繪圖區域的信息。
Series圖表序列
圖表序列,應該是整個繪圖中最關鍵的內容了,通俗點說,即是實際的繪圖數據區域,實際呈現的圖形形狀,就是由此集合中的每一個圖表來構成的,可以往集合里面添加多個圖表,每一個圖表可以有自己的繪制形狀、樣式、獨立的數據等。
需要注意的是,每一個圖表,你可以指定它的繪制區域(見ChartAreas的說明),讓此圖表呈現在某個繪圖區域,也可以讓幾個圖表在同一個繪圖區域疊加,如下圖:
上面兩幅圖,分別表示了把圖表放在不同的繪制區域和放在同一個繪制區域的情況。
繼續回到ChartAreas章節舉的例子,同時要顯示用戶的流量還要顯示系統的占用情況,對于這種時候,應該建立兩個Series,一個用于呈現用戶的流量,另一個則用于呈現系統的占用情況。它們分別屬于各自的繪圖區域。
Titles標題合集
根據字面含義即可以理解,是圖表的標題配置,同樣可以添加多個標題,以及設置標題的樣式及文字、位置等屬性。多看一下它的屬性即能明白各自的含義。
三。其它屬性
相對來說,我覺得比較有用的屬性有三個,分別是:Label、Tooltip以及Url鏈接。
Label即標簽的含義,可以在圖片的關鍵位置進行一些關鍵數字或文字的描述,如下圖:
像上圖:X軸和Y軸的文字便是標簽,以及圖表曲線中的紅點上的文字,也是標簽,添加了標簽,可以讓人更容易的對內容進行理解。
Tooltip即提示的含義,用于在各個關鍵點,如:標簽、圖形關鍵點、標題等當鼠標移動上去的時候,提示用戶一些相關的詳細或說明信息,例如上圖,可以給曲線中的每一個點增加Tooltip的屬性,寫上需要詳細說明的內容,比如:詳細的銷售明細,那么,在鼠標移動到這個點的時候,會自動彈出提示信息。
Tooltip可以支持簡單方式以及自定義的方式,簡單方式即像平時Html頁面設置的title之類的屬性效果,而自定義的方式,則可以實現圖形、文本等各種復雜的提示信息顯示。詳細的方式請參考官方例子的:Interactivity
and AJAX/Tooltips以及Interactivity and AJAX/Client Side
Scripts下面的相關例子。
Url鏈接,圖表控件中,有一大半的控件都有Url及Tooltip的屬性,你可以設置此屬性,在鼠標點擊的時候,代到其它相應的頁面去。
二、數據源 簡介
說到繪制圖表,可能很多人的第一反應除了是圖表呈現的方式外,更關心的便是數據如何添加,記得在很多年前,哪時要繪制一個數據曲線圖,一直找不到好的呈現方式,后來使用了SVG的繪圖模式,不過在添加數據的時候可謂吃盡了苦頭,畢竟,SVG只是一種描述語言,要動態的實現一個圖表的繪制,是非常困難的.對于微軟的圖表控件,數據添加是一件很簡單的方式,它支持多種數據添加方式,如:
可以在圖表的設計界面,在屬性設置窗口中的Series屬性下的Points中添加需要的數據.
可以在圖表的設計界面中,在屬性中綁定一個數據源.
可以在后臺代碼中,動態添加數據.
可以在后臺代碼中設置一個或多個數據源,直接綁定到圖表中.
第1,2兩種比較簡單,主要看一下3,4的用法!對于第3點,相對來說比較簡單,在后臺代碼中,找到要添加代碼的Series,通過它下面Points的Add、AddXY、AddY等方法,即可以實現數據的添加.例如: -->double t;for(t = 0; t <= (2.5 * Math.PI); t += Math.PI/6) {double ch1 = Math.Sin(t);double ch2 = Math.Sin(t-Math.PI/2); Chart1.Series["Channel 1"].Points.AddXY(t, ch1); Chart1.Series["Channel 2"].Points.AddXY(t, ch2); }
(Chart1為圖表的名字,Channel 1、Channel 2分別表示兩個Series數據序列)
(有幾個series,X軸上就有幾個不同的柱子,這里有兩個,所以有兩個!)
簡單練習效果:(圖表中有數學、語文、英語3個series,X抽是學生姓名。)
后臺數據綁定:
完!
總結
以上是生活随笔為你收集整理的chart绑定mysql数据源_MSChart图表之Chart组件 学习一篇(5个主要属性+数据源绑定)...的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: javascript number转st
- 下一篇: git如何合并指定文件内容_git小技巧