轉帖|使用教程|編輯:黃竹雯|2016-05-11 14:20:20.000|閱讀 4562 次
概述:昨天在網上看到了微軟發布了.NET 3.5框架下的圖表控件,第一時間抓下來看了一下,發覺功能很強勁,基本上能想到的圖表都可以使用它繪制出來,給圖形統計和報表圖形顯示提供了很好的解決辦法,同時支持Web和WinForm兩種方式。
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
昨天在網上看到了微軟發布的.NET 3.5框架下的圖表控件,第一時間抓下來看了一下,發覺功能很強勁,基本上能想到的圖表都可以使用它繪制出來,給圖形統計和報表圖形顯示提供了很好的解決辦法,同時支持Web和WinForm兩種方式,不過缺點也比較明顯,只能在最新的開發環境中使用,需要.Net 3.5 Sp1以及VS 2008的開發環境。
下面是下載地址:
下了它的示例程序后,運行了一下,非常的強大,可以支持各種各樣的圖形顯示,常見的:點狀圖、餅圖、柱狀圖、曲線圖、面積圖、排列圖等等,同時也支持3D樣式的圖表顯示,不過我覺得最有用的功能還是支持圖形上各個點的屬性操作,它可以定義圖形上各個點、標簽、圖形的提示信息(Tooltip)以及超級鏈接、Javascript動作等,而不是像其它圖形類庫僅生成一幅圖片而已,通過這些,加上微軟自己的Ajax框架,可以建立一個可以互動的圖形統計報表了。
控件的安裝相對比較簡單,下載完后,先執行“MSChart.exe”程序,它會自動檢測你的環境,安裝到系統目錄中去,如果要在VS 2008環境中直接使用,那么需要安裝For Vs2008的插件,MSChart_VisualStudioAddOn.exe,還有一個中文語言包MSChartLP_chs.exe。安裝完后,打開Vs2008,在建立項目的時候,你就能在工具欄中看到有一個Chart的控件了,如下圖:
安裝好后,建立一個.NET3.5的Web項目,像使用普通控件一樣拖放到要使用的Web界面即可。初步研究了一下,整個圖形控件主要由以下幾個部份組成:
Annotations是一個對圖形的一些注解對象的集合,所謂注解對象,類似于對某個點的詳細或者批注的說明,比如,在圖片上實現各個節點的關鍵信息,如下圖方框和黃色的小方框:
一個圖形上可以擁有多個注解對象,可以添加十多種圖形樣式的注解對象,包括常見的箭頭、云朵、矩行、圖片等等注解符號,通過各個注解對象的屬性,可以方便的設置注解對象的放置位置、呈現的顏色、大小、文字內容樣式等常見的屬性。
ChartAreas可以理解為是一個圖表的繪圖區,例如,你想在一幅圖上呈現兩個不同屬性的內容,一個是用戶流量,另一個則是系統資源占用情況,那么你要在一個圖形上繪制這兩種情況,明顯是不合理的,對于這種情況,可以建立兩個ChartArea,一個用于呈現用戶流量,另一個則用于呈現系統資源的占用情況。
當然了,圖表控件并不限制你添加多少個繪圖區域,你可以根據你的需要進行添加。對于每一個繪圖區域,你可以設置各自的屬性,如:X,Y軸屬性、背景等。
需要注意的是,繪圖區域只是一個可以作圖的區域范圍,它本身并不包含要作圖形的各種屬性數據。
多繪圖區效果圖如下,分為上下兩個繪圖區域,分別表示不同的繪圖數據:
Legends是一個圖例的集合,即標注圖形中各個線條或顏色的含義,同樣,一個圖片也可以包含多個圖例說明,比如像上面說的多個圖表區域的方式,則可以建立多個圖例,每別說明各個繪圖區域的信息,具體的圖例配置說明此處就不詳細說明了,可以參考一下官網的例子,寫得豐富的詳細了:)也上一張圖例的效果圖吧~
圖表序列,應該是整個繪圖中最關鍵的內容了,通俗點說,即是實際的繪圖數據區域,實際呈現的圖形形狀,就是由此集合中的每一個圖表來構成的,可以往集合里面添加多個圖表,每一個圖表可以有自己的繪制形狀、樣式、獨立 的數據等。
需要注意的是,每一個圖表,你可以指定它的繪制區域(見ChartAreas的說明),讓此圖表呈現在某個繪圖區域,也可以讓幾個圖表在同一個繪圖區域疊加,如下圖:
繼續回到ChartAreas章節舉的例子,同時要顯示用戶的流量還要顯示系統的占用情況,對于這種時候,應該建立兩個Series,一個用于呈現用戶的流量,另一個則用于呈現系統的占用情況。它們分別屬于各自的繪圖區域。
根據字面含義即可以理解,是圖表的標題配置,同樣可以添加多個標題,以及設置標題的樣式及文字、位置等屬性。多看一下它的屬性即能明白各自的含義。
相對來說,我覺得比較有用的屬性有三個,分別是:Label、Tooltip以及Url鏈接。
Label即標簽的含義,可以在圖片的關鍵位置進行一些關鍵數字或文字的描述,如下圖:
Tooltip即提示的含義,用于在各個關鍵點,如:標簽、圖形關鍵點、標題等當鼠標移動上去的時候,提示用戶一些相關的詳細或說明信息,例如上圖,可以給曲線中的每一個點增加Tooltip的屬性,寫上需要詳細說明的內容,比如:詳細的銷售明細,那么,在鼠標移動到這個點的時候,會自動彈出提示信息。
Tooltip可以支持簡單方式以及自定義的方式,簡單方式即像平時Html頁面設置的title之類的屬性效果,而自定義的方式,則可以實現圖形、文本等各種復雜的提示信息顯示。詳細的方式請參考官方例子的:Interactivity and AJAX/Tooltips以及Interactivity and AJAX/Client Side Scripts下面的相關例子。
Url鏈接,圖表控件中,有一大半的控件都有Url及Tooltip的屬性,你可以設置此屬性,在鼠標點擊的時候,代到其它相應的頁面去。
建議大家看看官方例子中的Interactivity and AJAX部份,很精彩。
下面寫一個小例子,建立一個系統的內存實時統計圖表,使用到了Ajax的方法,以及Windows Api取得系統內存的方法。
首先,建立一個Aspx頁面,拖動一個圖表控件到頁面,設置圖表控件的屬性如下:
其中,MEMORY_INFO,ComputerInfo是一個定義的結構體及調用Win32 API接口的一個訪問類。程序分別取得每一個圖表對象,每次加載的時候,都重新取得當前的內存和Cpu信息,再在圖表上添加一個點,需要注意的是,一定要設置圖表控件的EnableViewState屬性為True,否則無法記錄狀態。
<asp:Chart ID="ChartMemory" runat="server" BackColor="LightSteelBlue" BackGradientStyle="TopBottom" BackSecondaryColor="White" EnableTheming="False" EnableViewState="True" Height="363px" Width="415px"> <Legends> <asp:Legend Alignment="Center" Docking="Bottom" Name="Legend1" Title="圖例"> </asp:Legend> </Legends> <Titles> <asp:Title Font="微軟雅黑, 16pt" Name="Title1" Text="系統內存監控圖表"> </asp:Title> </Titles> <Series> <asp:Series BorderColor="White" BorderWidth="3" ChartArea="ChartArea1" ChartType="Spline" Legend="Legend1" Name="已使用物理內存" XValueType="Double" YValueType="Double"> </asp:Series> <asp:Series BorderWidth="3" ChartArea="ChartArea1" ChartType="Spline" Legend="Legend1" Name="全部占用內存"> </asp:Series> <asp:Series ChartArea="ChartArea2" ChartType="StackedArea" Legend="Legend1" Name="CPU"> </asp:Series> </Series> <ChartAreas> <asp:ChartArea BackColor="224, 224, 224" BackGradientStyle="LeftRight" Name="ChartArea1"> </asp:ChartArea> <asp:ChartArea Name="ChartArea2"> </asp:ChartArea> </ChartAreas> </asp:Chart>
一共建立了兩個繪圖區,一個用于呈現內存使用情況的在ChartArea1區域,另一個則是呈現Cpu使用情況的,放置在ChartArea2區域了。一共有三個圖表,分別表示已使用的物理內存、全部占用的物理內存,以及Cpu使用顯示的情況。
添加一個Ajax的計時器以及Ajax的ScriptManager,UpdatePanel,把計時器和圖表控件都拖進UpdatePanel里面。設置計時器的間隔時間為一秒鐘(1000),雙擊計時器,寫如下代碼:
static PerformanceCounter pc = new PerformanceCounter("Processor", "% Processor Time", "_Total"); protected void Timer1_Tick(object sender, EventArgs e) { MEMORY_INFO MemInfo = new MEMORY_INFO(); ComputerInfo.GlobalMemoryStatus(ref MemInfo); //UseMemory Series series = ChartMemory.Series[0]; int xCount = series.Points.Count == 0 ? 0 : series.Points.Count - 1; double lastXValue = series.Points.Count == 0 ? 1 : series.Points[xCount].XValue + 1; double lastYValue = (double)(MemInfo.dwTotalPhys-MemInfo.dwAvailPhys)/1024/1024; series.Points.AddXY(lastXValue, lastYValue); //Total Memory series = ChartMemory.Series[1]; lastYValue = (double)(MemInfo.dwTotalVirtual+MemInfo.dwTotalPhys-MemInfo.dwAvailPhys - MemInfo.dwAvailVirtual)/1024/1024; series.Points.AddXY(lastXValue, lastYValue); //CPU series = ChartMemory.Series[2]; lastYValue = (double)pc.NextValue(); series.Points.AddXY(lastXValue, lastYValue); // Remove points from the left chart side if number of points exceeds 100. while (this.ChartMemory.Series[0].Points.Count > 80) { // Remove series points foreach (Series s in this.ChartMemory.Series) { s.Points.RemoveAt(0); } } // Adjust categorical scale double axisMinimum = this.ChartMemory.Series[0].Points[0].XValue; this.ChartMemory.ChartAreas[0].AxisX.Minimum = axisMinimum; this.ChartMemory.ChartAreas[0].AxisX.Maximum = axisMinimum + 99; }
附上取得內存信息的類代碼:
/// <summary> ///取得計算機的系統信息 /// </summary> public class ComputerInfo { /// <summary> /// 取得Windows的目錄 /// </summary> /// <param name="WinDir"></param> /// <param name="count"></param> [DllImport("kernel32")] public static extern void GetWindowsDirectory(StringBuilder WinDir, int count); /// <summary> /// 獲取系統路徑 /// </summary> /// <param name="SysDir"></param> /// <param name="count"></param> [DllImport("kernel32")] public static extern void GetSystemDirectory(StringBuilder SysDir, int count); /// <summary> /// 取得CPU信息 /// </summary> /// <param name="cpuinfo"></param> [DllImport("kernel32")] public static extern void GetSystemInfo(ref CPU_INFO cpuinfo); /// <summary> /// 取得內存狀態 /// </summary> /// <param name="meminfo"></param> [DllImport("kernel32")] public static extern void GlobalMemoryStatus(ref MEMORY_INFO meminfo); /// <summary> /// 取得系統時間 /// </summary> /// <param name="stinfo"></param> [DllImport("kernel32")] public static extern void GetSystemTime(ref SYSTEMTIME_INFO stinfo); public ComputerInfo() { } }
//定義CPU的信息結構 [StructLayout(LayoutKind.Sequential)] public struct CPU_INFO { public uint dwOemId; public uint dwPageSize; public uint lpMinimumApplicationAddress; public uint lpMaximumApplicationAddress; public uint dwActiveProcessorMask; public uint dwNumberOfProcessors; public uint dwProcessorType; public uint dwAllocationGranularity; public uint dwProcessorLevel; public uint dwProcessorRevision; } //定義內存的信息結構 [StructLayout(LayoutKind.Sequential)] public struct MEMORY_INFO { public uint dwLength; public uint dwMemoryLoad; public uint dwTotalPhys; public uint dwAvailPhys; public uint dwTotalPageFile; public uint dwAvailPageFile; public uint dwTotalVirtual; public uint dwAvailVirtual; } //定義系統時間的信息結構 [StructLayout(LayoutKind.Sequential)] public struct SYSTEMTIME_INFO { public ushort wYear; public ushort wMonth; public ushort wDayOfWeek; public ushort wDay; public ushort wHour; public ushort wMinute; public ushort wSecond; public ushort wMilliseconds; }
運行的效果圖如下:
自:
本站文章除注明轉載外,均為本站原創或翻譯。歡迎任何形式的轉載,但請務必注明出處、不得修改原文相關鏈接,如果存在內容上的異議請郵件反饋至chenjj@fc6vip.cn