昨天在網(wǎng)上看到了微軟發(fā)布的.NET 3.5框架下的圖表控件，第一時(shí)間抓下來(lái)看了一下，發(fā)覺(jué)功能很強(qiáng)勁，基本上能想到的圖表都可以使用它繪制出來(lái)，給圖形統(tǒng)計(jì)和報(bào)表圖形顯示提供了很好的解決辦法，同時(shí)支持Web和WinForm兩種方式，不過(guò)缺點(diǎn)也比較明顯，只能在最新的開(kāi)發(fā)環(huán)境中使用，需要.Net 3.5 Sp1以及VS 2008的開(kāi)發(fā)環(huán)境。

下面是下載地址：

控件：Microsoft .NET Framework 3.5 的 Microsoft 圖表控件(Microsoft Chart Controls for Microsoft .NET Framework 3.5)

1. 包含英文版，中文版。
2. 語(yǔ)言包：Microsoft Chart Controls for Microsoft .NET Framework 3.5 Language Pack
3. Microsoft .NET Framework 3.5 的Microsoft 圖表控件 的語(yǔ)言包，包含23種語(yǔ)言。
4. Microsoft Chart Controls Add-on for Microsoft Visual Studio 2008 – 這個(gè)只有英文的，沒(méi)找到中文的。
5. 文檔 （Microsoft Chart Controls for .NET Framework Documentation）– 這個(gè)只有英文的，沒(méi)找到中文的。
6. Demo 下載：WinForm 和 Asp.net的例子（Samples Environment for Microsoft Chart Controls） – 這個(gè)只有英文的，沒(méi)找到中 文的。

下了它的示例程序后，運(yùn)行了一下，非常的強(qiáng)大，可以支持各種各樣的圖形顯示，常見(jiàn)的：點(diǎn)狀圖、餅圖、柱狀圖、曲線圖、面積圖、排列圖等等，同時(shí)也支持3D樣式的圖表顯示，不過(guò)我覺(jué)得最有用的功能還是支持圖形上各個(gè)點(diǎn)的屬性操作，它可以定義圖形上各個(gè)點(diǎn)、標(biāo)簽、圖形的提示信息（Tooltip）以及超級(jí)鏈接、Javascript動(dòng)作等，而不是像其它圖形類庫(kù)僅生成一幅圖片而已，通過(guò)這些，加上微軟自己的Ajax框架，可以建立一個(gè)可以互動(dòng)的圖形統(tǒng)計(jì)報(bào)表了。

一、安裝

控件的安裝相對(duì)比較簡(jiǎn)單，下載完后，先執(zhí)行“MSChart.exe”程序，它會(huì)自動(dòng)檢測(cè)你的環(huán)境，安裝到系統(tǒng)目錄中去，如果要在VS 2008環(huán)境中直接使用，那么需要安裝For Vs2008的插件，MSChart_VisualStudioAddOn.exe，還有一個(gè)中文語(yǔ)言包MSChartLP_chs.exe。安裝完后，打開(kāi)Vs2008，在建立項(xiàng)目的時(shí)候，你就能在工具欄中看到有一個(gè)Chart的控件了，如下圖：

二、使用

安裝好后，建立一個(gè).NET3.5的Web項(xiàng)目，像使用普通控件一樣拖放到要使用的Web界面即可。初步研究了一下，整個(gè)圖形控件主要由以下幾個(gè)部份組成：

1. Annotations —— 圖形注解集合
2. ChartAreas —— 圖表區(qū)域集合
3. Legends —— 圖例集合
4. Series —— 圖表序列集合（即圖表數(shù)據(jù)對(duì)象集合）
5. Titles —— 圖標(biāo)的標(biāo)題集合

Annotations注解集合

Annotations是一個(gè)對(duì)圖形的一些注解對(duì)象的集合，所謂注解對(duì)象，類似于對(duì)某個(gè)點(diǎn)的詳細(xì)或者批注的說(shuō)明，比如，在圖片上實(shí)現(xiàn)各個(gè)節(jié)點(diǎn)的關(guān)鍵信息，如下圖方框和黃色的小方框：

一個(gè)圖形上可以擁有多個(gè)注解對(duì)象，可以添加十多種圖形樣式的注解對(duì)象，包括常見(jiàn)的箭頭、云朵、矩行、圖片等等注解符號(hào)，通過(guò)各個(gè)注解對(duì)象的屬性，可以方便的設(shè)置注解對(duì)象的放置位置、呈現(xiàn)的顏色、大小、文字內(nèi)容樣式等常見(jiàn)的屬性。

ChartAreas圖表區(qū)域集合

ChartAreas可以理解為是一個(gè)圖表的繪圖區(qū)，例如，你想在一幅圖上呈現(xiàn)兩個(gè)不同屬性的內(nèi)容，一個(gè)是用戶流量，另一個(gè)則是系統(tǒng)資源占用情況，那么你要在一個(gè)圖形上繪制這兩種情況，明顯是不合理的，對(duì)于這種情況，可以建立兩個(gè)ChartArea，一個(gè)用于呈現(xiàn)用戶流量，另一個(gè)則用于呈現(xiàn)系統(tǒng)資源的占用情況。

當(dāng)然了，圖表控件并不限制你添加多少個(gè)繪圖區(qū)域，你可以根據(jù)你的需要進(jìn)行添加。對(duì)于每一個(gè)繪圖區(qū)域，你可以設(shè)置各自的屬性，如：X,Y軸屬性、背景等。

需要注意的是，繪圖區(qū)域只是一個(gè)可以作圖的區(qū)域范圍，它本身并不包含要作圖形的各種屬性數(shù)據(jù)。

多繪圖區(qū)效果圖如下，分為上下兩個(gè)繪圖區(qū)域，分別表示不同的繪圖數(shù)據(jù)：

Legends圖例集合

Legends是一個(gè)圖例的集合，即標(biāo)注圖形中各個(gè)線條或顏色的含義，同樣，一個(gè)圖片也可以包含多個(gè)圖例說(shuō)明，比如像上面說(shuō)的多個(gè)圖表區(qū)域的方式，則可以建立多個(gè)圖例，每別說(shuō)明各個(gè)繪圖區(qū)域的信息，具體的圖例配置說(shuō)明此處就不詳細(xì)說(shuō)明了，可以參考一下官網(wǎng)的例子，寫(xiě)得豐富的詳細(xì)了：）也上一張圖例的效果圖吧~

Series圖表序列

圖表序列，應(yīng)該是整個(gè)繪圖中最關(guān)鍵的內(nèi)容了，通俗點(diǎn)說(shuō)，即是實(shí)際的繪圖數(shù)據(jù)區(qū)域，實(shí)際呈現(xiàn)的圖形形狀，就是由此集合中的每一個(gè)圖表來(lái)構(gòu)成的，可以往集合里面添加多個(gè)圖表，每一個(gè)圖表可以有自己的繪制形狀、樣式、獨(dú)立 的數(shù)據(jù)等。

需要注意的是，每一個(gè)圖表，你可以指定它的繪制區(qū)域（見(jiàn)ChartAreas的說(shuō)明），讓此圖表呈現(xiàn)在某個(gè)繪圖區(qū)域，也可以讓幾個(gè)圖表在同一個(gè)繪圖區(qū)域疊加，如下圖：

繼續(xù)回到ChartAreas章節(jié)舉的例子，同時(shí)要顯示用戶的流量還要顯示系統(tǒng)的占用情況，對(duì)于這種時(shí)候，應(yīng)該建立兩個(gè)Series，一個(gè)用于呈現(xiàn)用戶的流量，另一個(gè)則用于呈現(xiàn)系統(tǒng)的占用情況。它們分別屬于各自的繪圖區(qū)域。

Titles標(biāo)題合集

根據(jù)字面含義即可以理解，是圖表的標(biāo)題配置，同樣可以添加多個(gè)標(biāo)題，以及設(shè)置標(biāo)題的樣式及文字、位置等屬性。多看一下它的屬性即能明白各自的含義。

三、其它屬性

相對(duì)來(lái)說(shuō)，我覺(jué)得比較有用的屬性有三個(gè)，分別是：Label、Tooltip以及Url鏈接。

Label即標(biāo)簽的含義，可以在圖片的關(guān)鍵位置進(jìn)行一些關(guān)鍵數(shù)字或文字的描述，如下圖：

Tooltip即提示的含義，用于在各個(gè)關(guān)鍵點(diǎn)，如：標(biāo)簽、圖形關(guān)鍵點(diǎn)、標(biāo)題等當(dāng)鼠標(biāo)移動(dòng)上去的時(shí)候，提示用戶一些相關(guān)的詳細(xì)或說(shuō)明信息，例如上圖，可以給曲線中的每一個(gè)點(diǎn)增加Tooltip的屬性，寫(xiě)上需要詳細(xì)說(shuō)明的內(nèi)容，比如：詳細(xì)的銷售明細(xì)，那么，在鼠標(biāo)移動(dòng)到這個(gè)點(diǎn)的時(shí)候，會(huì)自動(dòng)彈出提示信息。

Tooltip可以支持簡(jiǎn)單方式以及自定義的方式，簡(jiǎn)單方式即像平時(shí)Html頁(yè)面設(shè)置的title之類的屬性效果，而自定義的方式，則可以實(shí)現(xiàn)圖形、文本等各種復(fù)雜的提示信息顯示。詳細(xì)的方式請(qǐng)參考官方例子的：Interactivity and AJAX/Tooltips以及Interactivity and AJAX/Client Side Scripts下面的相關(guān)例子。

Url鏈接，圖表控件中，有一大半的控件都有Url及Tooltip的屬性，你可以設(shè)置此屬性，在鼠標(biāo)點(diǎn)擊的時(shí)候，代到其它相應(yīng)的頁(yè)面去。

建議大家看看官方例子中的Interactivity and AJAX部份，很精彩。

例子：建立一個(gè)Cpu信息和內(nèi)存使用的實(shí)時(shí)統(tǒng)計(jì)表

下面寫(xiě)一個(gè)小例子，建立一個(gè)系統(tǒng)的內(nèi)存實(shí)時(shí)統(tǒng)計(jì)圖表，使用到了Ajax的方法，以及Windows Api取得系統(tǒng)內(nèi)存的方法。

首先，建立一個(gè)Aspx頁(yè)面，拖動(dòng)一個(gè)圖表控件到頁(yè)面，設(shè)置圖表控件的屬性如下：

其中，MEMORY_INFO,ComputerInfo是一個(gè)定義的結(jié)構(gòu)體及調(diào)用Win32 API接口的一個(gè)訪問(wèn)類。程序分別取得每一個(gè)圖表對(duì)象，每次加載的時(shí)候，都重新取得當(dāng)前的內(nèi)存和Cpu信息，再在圖表上添加一個(gè)點(diǎn)，需要注意的是，一定要設(shè)置圖表控件的EnableViewState屬性為T(mén)rue，否則無(wú)法記錄狀態(tài)。

<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="系統(tǒng)內(nèi)存監(jiān)控圖表">
</asp:Title>
</Titles>
<Series>
<asp:Series BorderColor="White" BorderWidth="3" ChartArea="ChartArea1" 
ChartType="Spline" Legend="Legend1" Name="已使用物理內(nèi)存" XValueType="Double" 
YValueType="Double">
</asp:Series>
<asp:Series BorderWidth="3" ChartArea="ChartArea1" ChartType="Spline" 
Legend="Legend1" Name="全部占用內(nèi)存">
</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>

一共建立了兩個(gè)繪圖區(qū)，一個(gè)用于呈現(xiàn)內(nèi)存使用情況的在ChartArea1區(qū)域，另一個(gè)則是呈現(xiàn)Cpu使用情況的，放置在ChartArea2區(qū)域了。一共有三個(gè)圖表，分別表示已使用的物理內(nèi)存、全部占用的物理內(nèi)存，以及Cpu使用顯示的情況。

添加一個(gè)Ajax的計(jì)時(shí)器以及Ajax的ScriptManager，UpdatePanel，把計(jì)時(shí)器和圖表控件都拖進(jìn)UpdatePanel里面。設(shè)置計(jì)時(shí)器的間隔時(shí)間為一秒鐘（1000），雙擊計(jì)時(shí)器，寫(xiě)如下代碼：

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;
}

附上取得內(nèi)存信息的類代碼：

/// <summary>
///取得計(jì)算機(jī)的系統(tǒng)信息
/// </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>
/// 獲取系統(tǒng)路徑
/// </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>
/// 取得內(nèi)存狀態(tài)
/// </summary>
/// <param name="meminfo"></param>
[DllImport("kernel32")]
public static extern void GlobalMemoryStatus(ref MEMORY_INFO meminfo);
/// <summary>
/// 取得系統(tǒng)時(shí)間
/// </summary>
/// <param name="stinfo"></param>
[DllImport("kernel32")]
public static extern void GetSystemTime(ref SYSTEMTIME_INFO stinfo);

public ComputerInfo()
{
}
}

//定義CPU的信息結(jié)構(gòu) 
[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;
}
//定義內(nèi)存的信息結(jié)構(gòu) 
[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;
}
//定義系統(tǒng)時(shí)間的信息結(jié)構(gòu) 
[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;
}

運(yùn)行的效果圖如下：

自：

想要了解更多圖表的相關(guān)產(chǎn)品？聯(lián)系【】

點(diǎn)擊【圖表專題】了解更多圖表類資訊