VS控制元件Chart的使用
這兩天忙著做一個圖表的分析系統,正好用到了VS的chart的這個控制元件,感覺比以前的直觀的資料統計不知道要好多少倍,在此分享給大家。
一、控制元件介紹
說道chart控制元件呢,是一個VS帶的比較有意思的控制元件,因為之前沒有接觸過直接用應用程式來展示資料的需求,所以也就沒有用過這個型別的控制元件,這次正好遇到了,其實和之前在.NET中用到的帶有資料繫結的控制元件非常一樣,只不過他以一種形式把資料以圖表的形式展現了出來。
如圖:
由於這個圖表是二維的,所以在資料區一次只能繫結兩個資料,也就是在X和Y軸上繫結資料。但是可以無限新增資料組,從而有了上圖所示的樣子,溫度、溼度、PM2.5都是一個一個的二維資料組成的,通過控制元件內部就可以實現圖形的顯示了,話不多說,下面開始介紹如何繫結資料。
二、資料繫結
其實整個控制元件的資料繫結非常簡單,就是直接dataBind 和 dataSource 就行了,程式碼如下:
chart1.DataSource = dt;
chart1.DataBind();
這裡要注意的是,我們用的chart控制元件資料來源只是接收datatable型別的資料,不能接收泛型等其他型別的資料。博主親自試驗過了,dataTable是最好的資料來源。繫結完了資料來源,我們要怎麼顯示呢?就是要新增資料組項。
在這個控制元件的屬性中有這樣一個屬性,是Series,這個屬性就是整個資料顯示物件的配置集合,裡面包含了資料顯示的形式(折線,柱狀,餅狀,條狀,等等),還有對於資料成員的新增,欄位的繫結,以及資料顯示的方面的設定,如下:
首先是資料成員(幾種資料):
我們可以看到,上面就是如果想要有三種型別的資料對比顯示的話,就要有三個成員在成員項裡面,溫度、溼度、PM2.5都是資料成員的一種,他們的表現形式都可以自由設定。
接下來就是成員的設定了,首先是圖表型別:
裡面包含了我們日常需要的所有圖表型別,我們一定要先選好,然後資料就可以按照我們選定的型別顯示了,然後就是X、Y軸的資料繫結:
這裡需要跟想要繫結的資料欄位的名稱一樣即可,然後資料就會自動繫結到X/Y軸上,就可以按照要求顯示了,這裡不同的成員繫結的資料相同才有對比性,雖然可以不同,但是資料的顯示區間如果想要保持一致的話,資料的X周最好繫結成一樣的資料。
如果我們想要在程式碼中切換X/Y軸的資料怎麼辦呢?
chart1.Series[0].XValueMember = "dateTime";
chart1.Series[1].XValueMember = "dateTime";
chart1.Series[2].XValueMember = "dateTime";
series後面的序號是指的具體成員,然後後面的是具體屬性,任何屬性都可以這樣改變。
這個裡面還有一個屬性就是資料點和資料標籤,在屬性中和在實際圖表中的表示如圖所示:
我們通過調整屬性就可以直接控制資料點的顏色,形狀和資料標籤的顯示樣式了。當然圖例和空白標籤的設定也在這裡,我們也可以通過程式碼來實現控制,這裡不再贅述。
三、總結
我們在以後的開發中,資料的展示可以不僅僅只是通過表格的方式,也可以嘗試一下這種圖表的統計方式,他會讓資料變得更加的生動和形象,可以方便人們更加直觀的瞭解資料走向。
相關文章
- VB.net chart 控制元件使用控制元件
- 在WPF中使用Winform中自帶的畫圖控制元件Chart,模擬動態更新資料ORM控制元件
- helm chart denpence 怎麼使用
- 在Blazor中使用Chart.jsBlazorJS
- BootstrapBlazor實戰 Chart 圖表使用(1)bootBlazor
- Helm Chart 部署 Redis 的完美指南Redis
- 使用chart.js製作動態折線圖JS
- DevExpress控制元件與VS和.NET各個版本的支援情況devExpress控制元件
- lodop列印控制元件的使用控制元件
- ACCESS TreeView控制元件的使用View控制元件
- 基於vs2012開發activex(MFC)控制元件控制元件
- 開發ActiveX控制元件的實踐(1)--用VS2010開發一個簡單的TestOcx控制元件控制元件
- 這可能是目前最輕量級、最支援MVVM、可定製性最好的開源WPF Chart控制元件!MVVM控制元件
- WPF中Ribbon控制元件的使用控制元件
- WPF中Popup控制元件的使用控制元件
- VS2019 新增一組控制元件到工具箱控制元件
- C#控制元件之Repeater控制元件使用C#控制元件
- html表單控制元件禁用屬性readonly VS disabled介紹HTML控制元件
- 透過 Helm Chart 部署 Easysearch
- chart.js雷達圖JS
- XAML一些控制元件的使用控制元件
- e-chart實現上下圖示使用一個tooltip移入事件事件
- 基於 WebGL 的 3D Chart 圖表Web3D
- dcat-admin card的chart佈局問題
- VS Code 使用小技巧
- WPF中3D控制元件的使用3D控制元件
- Easysearch Chart 0.2.0都有哪些變化
- helm實戰之開發Chart
- 使用Markdown建立PPT的VS Code外掛
- java實現控制元件的移動及使用滑鼠改變控制元件大小Java控制元件
- VS Code 快速使用指南
- Kubeapps視覺化管理Helm Chart包APP視覺化
- [譯] 幫你高效使用 VS Code 的祕訣
- 手繪風格的 JS 圖表庫:Chart.xkcdJS
- VS2005(vs2008,vs2010)使用map檔案查詢程式崩潰原因
- 在Flex控制元件中使用XMLListCollectionFlex控制元件XML
- wpf專案使用winform控制元件ORM控制元件
- DevExpress-獨立使用的控制元件介紹-02devExpress控制元件
- VS2017-快捷鍵使用大全