微軟圖表控件MsChart使用初探

微軟圖表控件MsChart使用初探分類：

NET2009-09-0211:36微軟發(fā)布了.NET3.5框架下的圖表控件,基本上能想到的圖表都可以使用它繪制出來，給圖形統(tǒng)計和報表圖形顯示提供了很好的解決辦法，同時支持Web和WinForm兩種方式，不過缺點也比較明顯，只能在最新的開發(fā)環(huán)境中使用，需要.Net3.5Sp1以及VS2008的開發(fā)環(huán)境。下面是下載地址：控件：Microsoft.NETFramework3.5的Microsoft圖表控件(MicrosoftChartControlsforMicrosoft.NETFramework3.5)–包含英文版，中文版。上面提供的鏈接是中文版的，可以更改為英文版。語言包：MicrosoftChartControlsforMicrosoft.NETFramework3.5LanguagePackMicrosoft.NETFramework3.5的Microsoft圖表控件的語言包，包含23中語言。MicrosoftChartControlsAdd-onforMicrosoftVisualStudio2008

–這個只有英文的，沒找到中文的。文檔（MicrosoftChartControlsfor.NETFrameworkDocumentation）–這個只有英文的，沒找到中文的。WinForm和A的例子（SamplesEnvironmentforMicrosoftChartControls）–這個只有英文的，沒找到英文的。Demo下載：/mschart下了它的示例程序后，運行了一下，非常的強(qiáng)大，可以支持各種各樣的圖形顯示，常見的：點狀圖、餅圖、柱狀圖、曲線圖、面積圖、排列圖等等，同時也支持3D樣式的圖表顯示，不過我覺得最有用的功能還是支持圖形上各個點的屬性操作，它可以定義圖形上各個點、標(biāo)簽、圖形的提示信息（Tooltip）以及超級鏈接、Javascript動作等，而不是像其它圖形類庫僅生成一幅圖片而已，通過這些，加上微軟自己的Ajax框架，可以建立一個可以互動的圖形統(tǒng)計報表了。一。安裝

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

安裝好后，建立一個.NET3.5的Web項目，像使用普通控件一樣拖放到要使用的Web界面即可。初步研究了一下，整個圖形控件主要由以下幾個部份組成：1.Annotations--圖形注解集合2.ChartAreas--圖表區(qū)域集合3.Legends

--圖例集合4.Series--圖表序列集合（即圖表數(shù)據(jù)對象集合）5.Titles--圖標(biāo)的標(biāo)題集合Annotations注解集合

Annotations是一個對圖形的一些注解對象的集合，所謂注解對象，類似于對某個點的詳細(xì)或者批注的說明，比如，在圖片上實現(xiàn)各個節(jié)點的關(guān)鍵信息，如下圖方框和黃色的小方框：一個圖形上可以擁有多個注解對象，可以添加十多種圖形樣式的注解對象，包括常見的箭頭、云朵、矩行、圖片等等注解符號，通過各個注解對象的屬性，可以方便的設(shè)置注解對象的放置位置、呈現(xiàn)的顏色、大小、文字內(nèi)容樣式等常見的屬性。ChartAreas圖表區(qū)域集合

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

當(dāng)然了，圖表控件并不限制你添加多少個繪圖區(qū)域，你可以根據(jù)你的需要進(jìn)行添加。對于每一個繪圖區(qū)域，你可以設(shè)置各自的屬性，如：X,Y軸屬性、背景等。需要注意的是，繪圖區(qū)域只是一個可以作圖的區(qū)域范圍，它本身并不包含要作圖形的各種屬性數(shù)據(jù)。多繪圖區(qū)效果圖如下，分為上下兩個繪圖區(qū)域，分別表示不同的繪圖數(shù)據(jù)：Legends圖例集合

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

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

需要注意的是，每一個圖表，你可以指定它的繪制區(qū)域（見ChartAreas的說明），讓此圖表呈現(xiàn)在某個繪圖區(qū)域，也可以讓幾個圖表在同一個繪圖區(qū)域疊加，如下圖：上面兩幅圖，分別表示了把圖表放在不同的繪制區(qū)域和放在同一個繪制區(qū)域的情況。

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

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

相對來說，我覺得比較有用的屬性有三個，分別是：Label、Tooltip以及Url鏈接。

Label即標(biāo)簽的含義，可以在圖片的關(guān)鍵位置進(jìn)行一些關(guān)鍵數(shù)字或文字的描述，如下圖：像上圖：X軸和Y軸的文字便是標(biāo)簽，以及圖表曲線中的紅點上的文字，也是標(biāo)簽，添加了標(biāo)簽，可以讓人更容易的對內(nèi)容進(jìn)行理解。

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

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

Url鏈接，圖表控件中，有一大半的控件都有Url及Tooltip的屬性，你可以設(shè)置此屬性，在鼠標(biāo)點擊的時候，代到其它相應(yīng)的頁面去。建議大家看看官方例子中的InteractivityandAJAX部份，很精彩：）例子：建立一個Cpu信息和內(nèi)存使用的實時統(tǒng)計表

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

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

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

<asp:ChartID="ChartMemory"runat="server"BackColor="LightSteelBlue"

BackGradientStyle="TopBottom"BackSecondaryColor="White"EnableTheming="False"

EnableViewState="True"Height="363px"Width="415px">

<Legends>

<asp:LegendAlignment="Center"Docking="Bottom"Name="Legend1"Title="圖例">

</asp:Legend>

</Legends>

<Titles>

<asp:TitleFont="微軟雅黑,16pt"Name="Title1"Text="系統(tǒng)內(nèi)存監(jiān)控圖表">

</asp:Title>

</Titles>

<Series>

<asp:SeriesBorderColor="White"BorderWidth="3"ChartArea="ChartArea1"

ChartType="Spline"Legend="Legend1"Name="已使用物理內(nèi)存"XValueType="Double"

YValueType="Double">

</asp:Series>

<asp:SeriesBorderWidth="3"ChartArea="ChartArea1"ChartType="Spline"

Legend="Legend1"Name="全部占用內(nèi)存">

</asp:Series>

<asp:SeriesChartArea="ChartArea2"ChartType="StackedArea"Legend="Legend1"

Name="CPU">

</asp:Series>

</Series>

<ChartAreas>

<asp:ChartAreaBackColor="224,224,224"BackGradientStyle="LeftRight"

Name="ChartArea1">

</asp:ChartArea>

<asp:ChartAreaName="ChartArea2">

</asp:ChartArea>

</ChartAreas>

</asp:Chart>一共建立了兩個繪圖區(qū)，一個用于呈現(xiàn)內(nèi)存使用情況的在ChartArea1區(qū)域，另一個則是呈現(xiàn)Cpu使用情況的，放置在ChartArea2區(qū)域了。一共有三個圖表，分別表示已使用的物理內(nèi)存、全部占用的物理內(nèi)存，以及Cpu使用顯示的情況。添加一個Ajax的計時器以及Ajax的ScriptManager，UpdatePanel，把計時器和圖表控件都拖進(jìn)UpdatePanel里面。設(shè)置計時器的間隔時間為一秒鐘（1000），雙擊計時器，寫如下代碼：Code

staticPerformanceCounterpc=newPerformanceCounter("Processor","%ProcessorTime","_Total");

protectedvoidTimer1_Tick(objectsender,EventArgse)

{

MEMORY_INFOMemInfo=newMEMORY_INFO();

ComputerInfo.GlobalMemoryStatus(refMemInfo);

//UseMemory

Seriesseries=ChartMemory.Series[0];

intxCount=series.Points.Count==0?0:series.Points.Count-1;

doublelastXValue=series.Points.Count==0?1:series.Points[xCount].XValue+1;

doublelastYValue=(double)(MemInfo.dwTotalPhys-MemInfo.dwAvailPhys)/1024/1024;

series.Points.AddXY(lastXValue,lastYValue);

//TotalMemory

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

//Removepointsfromtheleftchartsideifnumberofpointsexceeds100.

while(this.ChartMemory.Series[0].Points.Count>80)

{

//Removeseriespoints

foreach(Seriessinthis.ChartMemory.Series)

{

s.Points.RemoveAt(0);

}

}

//Adjustcategoricalscale

doubleaxisMinimum=this.ChartMemory.Series[0].Points[0].XValue;

this.ChartMemory.ChartAreas[0].AxisX.Minimum=axisMinimum;

this.ChartMemory.ChartAreas[0].AxisX.Maximum=axisMinimum+99;

}

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

///<summary>

///取得計算機(jī)的系統(tǒng)信息

///</summary>

publicclassComputerInfo

{

///<summary>

///取得Windows的目錄

///</summary>

///<paramname="WinDir"></param>

///<paramname="count"></param>

[DllImport("kernel32")]

publicstaticexternvoidGetWindowsDirectory(StringBuilderWinDir,intcount);

///<summary>

///獲取系統(tǒng)路徑

///</summary>

///<paramname="SysDir"></param>

///<paramname="count"></param>

[DllImport("kernel32")]

publicstaticexternvoidGetSystemDirectory(StringBuilderSysDir,intcount);

///<summary>

///取得CPU信息

///</summary>

///<paramname="cpuinfo"></param>

[DllImport("kernel32")]

publicstaticexternvoidGetSystemInfo(refCPU_INFOcpuinfo);

///<summary>

///取得內(nèi)存狀態(tài)

///</summary>

///<paramname="meminfo"></param>

[DllImport("kernel32")]

publicstaticexternvoidGlobalMemoryStatus(refMEMORY_INFOmeminfo);

///<summary>

///取得系統(tǒng)時間

///</summary>

///<paramname="stinfo"></param>

[DllImport("kernel32")]

publicstaticexternvoidGetSystemTime(refSYSTEMTIME_INFOstinfo);

publicComputerInfo()

{

}

}

//定義CPU的信息結(jié)構(gòu)

[StructLayout(LayoutKind.Sequential)]

publicstructCPU_INFO

{

publicuintdwOemId;

publicuintdwPageSize;

publicuintlpMinimumApplicationAddress;

publicuintlpMaximumApplicationAddress;

publicuintdwActiveProcessorMask;

publicuintdwNumberOfProcessors;

publicuintdwProcessorType;

publicuintdwAllocationGranularity;

publicuintdwProcessorLevel;

publicuintdwProcessorRevision;

}

//定義內(nèi)存的信息結(jié)構(gòu)

[StructLayout(LayoutKind.Sequential)]

publicstructMEMORY_INFO

{

publicuintdwLength;

publicuintdwMemoryLoad;

publicuintdwTotalPhys;

publicuintdwAvailPhys;

publicuintdwTotalPageFile;

publicuintdwAvailPageFile;

publicuintdwTotalVirtual;

publicuintdwAvailVirtual;

}

//定義系統(tǒng)時間的信息結(jié)構(gòu)

[StructLayout(LayoutKind.Sequential)]

publicstructSYSTEMTIME_INFO

{

publicushortwYear;

publicushortwMonth;

publicushortwDayOfWeek;

publicushortwDay;

publicushortwHour;

publicushortwMinute;

publicushortwSecond;

publicushortwMilliseconds;

}

運行的效果圖如下：vs2008開發(fā)3D報表-MSChart學(xué)習(xí)幫助-開發(fā)日志(一)標(biāo)簽：

vs2008

報表

圖形報表

3D報表

分類：

NET2009-09-0209:47首先看到這個報表的界面會不會感覺很爽，沒錯，這就是用MSchart的圖形報表組件，完全免費的開發(fā)的如果你不看這篇文章，可能會碰很多釘子，寫這個就是為了讓大家更快，更順利的去使用這個.netFrameWork3.5新組件的功能先發(fā)表了，繼續(xù)修改，免得又出現(xiàn)關(guān)閉瀏覽器問題...繼續(xù)

首先你要安裝Vs2008這我就不說了，.netFrameWork3.5這也是要有的，然后下載MSChart的和4個補丁文件，在這里我都給大家提供好了，在我的資源里就有下載，5分哦，不過下載完評論下就不扣分了。--=====================================================================--然后依次安裝dotnetfx35setup.exeMSChart_VisualStudioAddOn.exeMSChartLP_chs.exeMSChart.exe這幾個文件，然后OK啟動VS2008準(zhǔn)備寫程序--=====================================================================--創(chuàng)建一個Web項目然后在左邊的工具卡里添加.netFrameWork組件

Chart

這里添加WebUI的Chart組件如果時WinForm的話就添加WinForm的然后在數(shù)據(jù)的選項卡里，把Chart的控件拖到界面上

--=====================================================================--HTML代碼如下<asp:chartid="Chart1"runat="server"Height="296px"Width="412px"ImageLocation="~/TempImages/ChartPic_#SEQ(300,3)"Palette="BrightPastel"imagetype="Png"BorderDashStyle="Solid"BackSecondaryColor="White"BackGradientStyle="TopBottom"BorderWidth="2"backcolor="#D3DFF0"BorderColor="26,59,105">

<legends>

<asp:LegendIsTextAutoFit="False"Name="Default"BackColor="Transparent"Font="TrebuchetMS,8.25pt,style=Bold"></asp:Legend>

</legends>

<borderskinskinstyle="Emboss"></borderskin>

<series>

<asp:SeriesName="Column"BorderColor="180,26,59,105">

<points>

<asp:DataPointYValues="45"/>

<asp:DataPointYValues="34"/>

<asp:DataPointYValues="67"/>

<asp:DataPointYValues="31"/>

<asp:DataPointYValues="27"/>

<asp:DataPointYValues="87"/>

<asp:DataPointYValues="45"/>

<asp:DataPointYValues="32"/>

</points>

</asp:Series>

</series>

<chartareas>

<asp:ChartAreaName="ChartArea1"BorderColor="64,64,64,64"BorderDashStyle="Solid"BackSecondaryColor="White"BackColor="64,165,191,228"ShadowColor="Transparent"BackGradientStyle="TopBottom">

<area3dstyleRotation="10"perspective="10"Inclination="15"IsRightAngleAxes="False"wallwidth="0"IsClustered="False"></area3dstyle>

<axisylinecolor="64,64,64,64">

<labelstylefont="TrebuchetMS,8.25pt,style=Bold"/>

<majorgridlinecolor="64,64,64,64"/>

</axisy>

<axisxlinecolor="64,64,64,64">

<labelstylefont="TrebuchetMS,8.25pt,style=Bold"/>

<majorgridlinecolor="64,64,64,64"/>

</axisx>

</asp:ChartArea>

</chartareas>

</asp:chart>--=====================================================================--后臺代碼如下usingSystem;

usingSystem.Collections;

usingSystem.Configuration;

usingSystem.Data;

usingSystem.Linq;

usingSystem.Web;

usingSystem.Web.Security;

usingSystem.Web.UI;

usingSystem.Web.UI.HtmlControls;

usingSystem.Web.UI.WebControls;

usingSystem.Web.UI.WebControls.WebParts;

usingSystem.Xml.Linq;

usingSystem.Web.UI.DataVisualization.Charting;

namespaceWebApplication2

{

publicpartialclass_Default:System.Web.UI.Page

{

protectedvoidPage_Load(objectsender,EventArgse)

{

//Createnewdataseriesandsetit'svisualattributes

Seriesseries=newSeries("Spline");

series.ChartType=SeriesChartType.Spline;

series.BorderWidth=3;

series.ShadowOffset=2;

//Populatenewserieswithdata

series.Points.AddY(67);

series.Points.AddY(57);

series.Points.AddY(83);

series.Points.AddY(23);

series.Points.AddY(70);

series.Points.AddY(60);

series.Points.AddY(90);

series.Points.AddY(20);

//Addseriesintothechart'sseriescollection

Chart1.Series.Add(series);

}

}

}

ok，你可以按F5運行了--=====================================================================--是不是報錯了?哈哈，當(dāng)然要報錯還要配置Web.Config開個玩笑：）Web.Config還要配置如下<appSettings>

<addkey="ChartImageHandler"value="Storage=file;Timeout=20;Url=~/tempImages/;"/>

</appSettings>

<httpHandlers>

<removeverb="*"path="*.asmx"/>

<addverb="*"path="*.asmx"validate="false"type="System.Web.Script.Services.ScriptHandlerFactory,System.Web.Extensions,Version=,Culture=neutral,PublicKeyToken=31BF3856AD364E35"/>

<addverb="*"path="*_AppService.axd"validate="false"type="System.Web.Script.Services.ScriptHandlerFactory,System.Web.Extensions,Version=,Culture=neutral,PublicKeyToken=31BF3856AD364E35"/>

<addverb="GET,HEAD"path="ScriptResource.axd"type="System.Web.Handlers.ScriptResourceHandler,System.Web.Extensions,Version=,Culture=neutral,PublicKeyToken=31BF3856AD364E35"validate="false"/>

<addpath="ChartImg.axd"verb="GET,HEAD"type="System.Web.UI.DataVisualization.Charting.ChartHttpHandler,System.Web.DataVisualization,Version=,Culture=neutral,PublicKeyToken=31bf3856ad364e35"validate="false"/>

</httpHandlers>

<handlers>

<removename="ChartImageHandler"/>

<addname="ChartImageHandler"preCondition="integratedMode"verb="GET,HEAD"path="ChartImg.axd"type="System.Web.UI.DataVisualization.Charting.ChartHttpHandler,System.Web.DataVisualization,Version=,Culture=neutral,PublicKeyToken=31bf3856ad364e35"/>

</handlers>

ok，再次運行，你會看到你喜歡看到的東西了微軟圖表控件MsChart使用初探--數(shù)據(jù)綁定(交叉表)標(biāo)簽：

series

綁定

chart

myreader

label

分類：

NET2009-09-0414:54本來在考慮是否繼續(xù)寫圖表控件的使用文章,畢竟,微軟自帶的例子已經(jīng)非常詳細(xì)了,花點時間參考一下基本上可以了解用法和使用特性,不過后來想想,還是寫一下咯,抽出其中大家關(guān)心的內(nèi)容,寫出其中常用的使用方法,可以省去大家的時間,在需要深入的時候再去詳細(xì)查看例子,也當(dāng)是學(xué)習(xí)筆記吧:)(BTW:我也是邊學(xué)習(xí)邊寫的,因此,寫的文章中難免有不足或失誤的地方,希望各位朋友指正出來咯,大家一起提高~本文中基本上只會寫出最簡單常用的功能,復(fù)雜的數(shù)據(jù)操作請參考微軟詳細(xì)的例程)

一.數(shù)據(jù)源

說到繪制圖表,可能很多人的第一反應(yīng)除了是圖表呈現(xiàn)的方式外,更關(guān)心的便是數(shù)據(jù)如何添加,記得在很多年前,哪時要繪制一個數(shù)據(jù)曲線圖,一直找不到好的呈現(xiàn)方式,后來使用了SVG的繪圖模式,不過在添加數(shù)據(jù)的時候可謂吃盡了苦頭,畢竟,SVG只是一種描述語言,要動態(tài)的實現(xiàn)一個圖表的繪制,是非常困難的.對于微軟的圖表控件,數(shù)據(jù)添加是一件很簡單的方式,它支持多種數(shù)據(jù)添加方式,如:可以在圖表的設(shè)計界面,在屬性設(shè)置窗口中的Series屬性下的Points中添加需要的數(shù)據(jù).可以在圖表的設(shè)計界面中,在屬性中綁定一個數(shù)據(jù)源.可以在后臺代碼中,動態(tài)添加數(shù)據(jù).可以在后臺代碼中設(shè)置一個或多個數(shù)據(jù)源,直接綁定到圖表中.在此處,我只著重講解一下第3,4兩點.對于第3點,相對來說比較簡單,在后臺代碼中,找到要添加代碼的Series,通過它下面Points的Add、AddXY、AddY等方法,即可以實現(xiàn)數(shù)據(jù)的添加.例如:doublet;

for(t=0;t<=(2.5*Math.PI);t+=Math.PI/6)

{

doublech1=Math.Sin(t);

doublech2=Math.Sin(t-Math.PI/2);

Chart1.Series["Channel1"].Points.AddXY(t,ch1);

Chart1.Series["Channel2"].Points.AddXY(t,ch2);

}(注：代碼摘自微軟的例子，上例中，Chart1為圖表的名字，Channel1、Channel2分別表示兩個Series數(shù)據(jù)序列)

二.綁定數(shù)據(jù)

先來看看圖表控件都支持什么類型的數(shù)據(jù)綁定，根據(jù)官方文檔的說法，只要是實現(xiàn)了IEnumerable接口的數(shù)據(jù)類型，都可以綁定到圖表控件中，例如：DataView,DataReader,DataSet,DataRow,DataColumn,Array,List,SqlCommand,OleDbCommand,SqlDataAdapter,及OleDbDataAdapter對象。

對于開發(fā)來說，最常用的還是DataView、DataReader、DataSet、DataRow、Array、List這幾種類型了，有幾點需要注意一下：圖表控件支持多數(shù)據(jù)源的綁定，例如：X軸綁定一個數(shù)據(jù)集ds1,Y軸可以綁定另一個數(shù)據(jù)集ds2，當(dāng)然也可以是X軸綁定到一個List數(shù)據(jù)對象，Y軸綁定到一個DataView對象等等。圖表控件的綁定方式一般有兩種，常規(guī)綁定及交差表的綁定。圖表控件的Y軸數(shù)據(jù)，支持一次綁定多個值，以繪制時間、區(qū)域、使用量等之類的圖形。

綁定數(shù)據(jù)的流程如下：

大意是，綁定數(shù)據(jù)里面是否有分組數(shù)據(jù)需要綁定，如果有，則調(diào)用交叉表綁定的方法。否則判斷是否時綁定X軸和Y軸（包括標(biāo)簽、超鏈接、圖例文字等自定義屬性），如果是，則調(diào)用Points.DataBind方法進(jìn)行綁定操作。再判斷是否有不同的X軸或Y軸數(shù)據(jù)，如果有，則分別調(diào)用X,Y軸的綁定方法Points.DataBindX，Points.DataBindY進(jìn)行數(shù)據(jù)綁定。最后，再判斷是否需要進(jìn)行多個Y軸值的綁定。

下面分別對幾種數(shù)據(jù)綁定的方法進(jìn)行一下說明：

1.綁定一張數(shù)據(jù)表

綁定一張數(shù)據(jù)表，例如綁定一張普通的數(shù)據(jù)表,表數(shù)據(jù)如下:

綁定方法的代碼:stringmySelectQuery="SELECTName,SalesFROMREPS;";OleDbConnectionmyConnection=newOleDbConnection(myConnectionString);OleDbCommandmyCommand=newOleDbCommand(mySelectQuery,myConnection);myCommand.Connection.Open();OleDbDataReadermyReader=myCommand.ExecuteReader(CommandBehavior.CloseConnection);Chart1.DataBindTable(myReader,"Name");myReader.Close();myConnection.Close();因為數(shù)據(jù)源中只有兩列Name和Sales,因此在調(diào)用Chart1.DataBindTable方法的時候,告訴了圖表X軸的名稱為Name,因此自動將Sales設(shè)置為Y軸的數(shù)據(jù)了.生成的圖形如下:

如果修改一下Sql語句為:SELECTName,ID,RegionIDFROMREPS;其它都不變化,再看看圖表是如何處理另外兩個字段的,生成的圖表如下:

此時,圖表自動將ID,RegionID字段當(dāng)成了Y值,生成了兩個Series，因此每個用戶都有兩個值,生成的圖形也有兩個柱狀圖.

上面是一種動態(tài)綁定的方式,有人可能會問了,如果我想確定我要綁定的列,比如:X軸綁定某個字段,Y軸綁定某個字段如何操作呢?對于這種綁定,有幾種方法可以實現(xiàn).

第一種:這種方法可能是很常見的,在原來的.NET編程中出現(xiàn)的機(jī)率非常之高,方法如下://設(shè)置數(shù)據(jù)源,myDv是一個取出數(shù)據(jù)集的DataView

chart1.DataSource=myDv;

//分別設(shè)置圖表的X值和Y值

chart1.Series["Series1"].XValueMember="Name";

chart1.Series["Series1"].YValueMembers="Sales";

//綁定設(shè)置的數(shù)據(jù)

chart1.DataBind();

第二種:即直接調(diào)用點的綁定方法//myReader為取得的DataReader對象Chart1.Series["Series1"].Points.DataBindXY(myReader,"Name",myReader,"Sales");第三種:調(diào)用DataBind的方法實現(xiàn)Chart1.Series["Series1"].Points.DataBind(myReader,"Name","Sales","");上面幾種方法得到的效果都是一樣的.當(dāng)然了，上面三種方法需要自己建立Series，要顯示兩個柱狀圖，像上面的例子中的圖形，那么得手動建立兩個Series，然后分別進(jìn)行上面的綁定操作。

此處說一下Label和Tooltip的綁定方式,要在綁定的圖表中顯示標(biāo)簽(Label)及提示(Tooltip),可以在綁定的時候,設(shè)置綁定的屬性.對于上面的第一、二種方法，可以調(diào)用如下的方法來設(shè)置Label和Tooltip；例如，兩個數(shù)據(jù)序列名稱分別為Series1和Series2，設(shè)置代碼如下：Chart1.Series["Series1"].Label="#VAL";

Chart1.Series["Series1"].Points.DataBind(myDs.Tables[0].DefaultView,"Name","ID","");

Chart1.Series["Series2"].Label="#VAL";

Chart1.Series["Series2"].Points.DataBind(myDs.Tables[0].DefaultView,"Name","RegionID","");其中的#VAL是Label和Tooltip的通配符，表示取默認(rèn)Y軸變量的意思。具體的詳細(xì)操作可以參考例程：ChartFeatures/Labels下面的內(nèi)容。以后有空我也寫一篇Label的和其它變量的設(shè)置吧。

對于第三種調(diào)用的綁定則稍微不同，如下：Chart1.Series["Series1"].Points.DataBind(myDs.Tables[0].DefaultView,"Name","ID","Label=ID,ToolTip=RegionID");Chart1.Series["Series2"].Points.DataBind(myDs.Tables[0].DefaultView,"Name","RegionID","Label=RegionID,ToolTip=ID");其實就是利用第三個屬性，通過格式化的字符串來設(shè)置綁定屬性，Label表示標(biāo)簽，ToolTip表示提示信息，Url表示超鏈接等等。最后生成的圖片如下：

2.綁定一個交叉表

微軟的圖表控件提供了一個交叉表數(shù)據(jù)的綁定方法DataBindCrossTable，它可以根據(jù)數(shù)據(jù)動態(tài)的生成數(shù)據(jù)序列（Series），借用官方的例子，數(shù)據(jù)庫的表數(shù)據(jù)如下：

我們先看看DataBindCrossTable的參數(shù)，它有兩個重載方法，分別是：publicvoidDataBindCrossTable(IEnumerabledataSource,stringseriesGroupByField,stringxField,stringyFields,stringotherFields,PointSortOrdersortingOrder)以及publicvoidDataBindCrossTable(IEnumerabledataSource,stringseriesGroupByField,stringxField,stringyFields,stringotherFields)每個參數(shù)的含義如下：

dataSource

要綁定的數(shù)據(jù)源.

seriesGroupByField

要分組統(tǒng)計的數(shù)據(jù)字段名稱，例如按姓名、日期等.

xField

X軸綁定的字段名稱.

yFields

Y軸綁定的字段名稱，如果需要綁定多個字段，則用逗號將字段名分開.

otherFields

其它數(shù)據(jù)字段屬性，就是上面剛講的，標(biāo)簽、提示、Url等屬性.

sortingOrder

設(shè)置數(shù)據(jù)是正確還是逆序排列.

此時要以統(tǒng)計每個用戶的年銷售曲線，那么分組統(tǒng)計的字段名應(yīng)該設(shè)置為Name，如下：Chart1.DataBindCrossTable(

myReader,

"Name",

"Year",

"Sales",

"Label=Commissions{C}");用如上的方法綁定，生成的圖形如下：相反，如果要統(tǒng)計用戶每年的曲線，則將字段反轉(zhuǎn)一下即可，如下：Chart1.DataBindCrossTable(

myReader,

"Year",

"Name",

"Sales",

"Label=Commissions{C}");

這次就先說到這里咯，說幾個需要注意的地方：

在進(jìn)行Y軸數(shù)據(jù)綁定的時候，如果要綁定多個字段，默認(rèn)情況會出錯，那是因為需要設(shè)置Y軸的可保存值數(shù)量，設(shè)置為你需要保存的數(shù)量即可，設(shè)置的地點在：Series-》YValuesPrePoint，設(shè)置為你需要顯示的個數(shù)即可。

在進(jìn)行DataTable綁定的時候，Label、ToolTip等屬性的字段格式化比較困難（otherFields屬性），我試了半天，也就試出了一次只能綁定一個字段，因為是和數(shù)據(jù)集綁定，如果要在標(biāo)簽上增加文字的話，可以使用:Field{xxxx#xxxx}，其中#會替換為相應(yīng)的文字，例如：Field的值為45，那么最后的呈現(xiàn)的結(jié)果就是：xxxx45XXXX.

BTW:有很多東西我自己也在研究中，因此說得不是很完善，希望大家一起研究吧~下次再研究一下數(shù)據(jù)操作方面的東東以及標(biāo)簽等的顯示。解決ASP.NETChart控件出錯為ChartImg.axd執(zhí)行子請求時出錯標(biāo)簽：

Chart

ChartImg

ChartImageHandler

分類：

NET2009-12-1009:561.修改web.Config<addkey="ChartImageHandler"value="storage=file;timeout=20;url=~/TempImages/;"/>將其中的dir=c:\TempImages\的絕對路徑修改外url=~/TempImages/相對路徑（前提條件：網(wǎng)站文件中必須包含TempImages文件夾）2.修改<addpath="ChartImg.axd"verb="GET,HEAD"type="System.Web.UI.DataVisualization.Charting.ChartHttpHandler,System.Web.DataVisualization,Version=,Culture=neutral,PublicKeyToken=31bf3856ad364e35"validate="false"/>為<addpath="ChartImg.axd"verb="GET,POST,HEAD"type="System.Web.UI.DataVisualization.Charting.ChartHttpHandler,System.Web.DataVisualization,Version=,Culture=neutral,PublicKeyToken=31bf3856ad364e35"validate="false"/>3.修改<addname="ChartImageHandler"preCondition="integratedMode"verb="GET,HEAD"

path="ChartImg.axd"type="System.Web.UI.DataVisualization.Charting.ChartHttpHandler,System.Web.DataVisualization,Version=,Culture=neutral,PublicKeyToken=31bf3856ad364e35"/>為：<addname="ChartImageHandler"preCondition="integratedMode"verb="GET,HEAD,POST"

path="ChartImg.axd"type="System.Web.UI.DataVisualization.Charting.ChartHttpHandler,System.Web.DataVisualization,Version=,Culture=neutral,PublicKeyToken=31bf3856ad364e35"/>介紹MSChart的常用屬性和事件標(biāo)簽：

mschart

繪圖

數(shù)據(jù)源

集合

綁定

分類：

NET2009-09-0414:24介紹MSChart的常用屬性和事件MSChart的元素組成

最常用的屬性包括ChartAreas：增加多個繪圖區(qū)域，每個繪圖區(qū)域包含獨立的圖表組、數(shù)據(jù)源，用于多個圖表類型在一個繪圖區(qū)不兼容時。AlignmentOrientation：圖表區(qū)對齊方向，定義兩個繪圖區(qū)域間的對齊方式。AlignmentStyle：圖表區(qū)對齊類型，定義圖表間用以對其的元素。AlignWithChartArea：參照對齊的繪圖區(qū)名稱。InnerPlotPosition：圖表在繪圖區(qū)內(nèi)的位置屬性。Auto：是否自動對齊。Height：圖表在繪圖區(qū)內(nèi)的高度（百分比，取值在0-100）Width：圖表在繪圖區(qū)內(nèi)的寬度（百分比，取值在0-100）X,Y：圖表在繪圖區(qū)內(nèi)左上角坐標(biāo)Position：繪圖區(qū)位置屬性，同InnerPlotPosition。Name：繪圖區(qū)名稱。Axis：坐標(biāo)軸集合Title：坐標(biāo)軸標(biāo)題TitleAlignment：坐標(biāo)軸標(biāo)題對齊方式Interval：軸刻度間隔大小IntervalOffset：軸刻度偏移量大小MinorGrid：次要輔助線MinorTickMark：次要刻度線MajorGrid：主要輔助線MajorTickMark：主要刻度線DataSourceID：MSChart的數(shù)據(jù)源。Legends：圖例說明。Palette：圖表外觀定義。Series：最重要的屬性，圖表集合，就是最終看到的餅圖、柱狀圖、線圖、點圖等構(gòu)成的集合；可以將多種相互兼容的類型放在一個繪圖區(qū)域內(nèi)，形成復(fù)合圖。IsValueShownAsLabel：是否顯示數(shù)據(jù)點標(biāo)簽，如果為true，在圖表中顯示每一個數(shù)據(jù)值Label：數(shù)據(jù)點標(biāo)簽文本LabelFormat：數(shù)據(jù)點標(biāo)簽文本格式LabelAngle：標(biāo)簽字體角度Name：圖表名稱Points：數(shù)據(jù)點集合XValueType：橫坐標(biāo)軸類型YValueType：縱坐標(biāo)軸類型XValueMember：橫坐標(biāo)綁定的數(shù)據(jù)源（如果數(shù)據(jù)源為Table，則填寫橫坐標(biāo)要顯示的字段名稱）YValueMembers：縱坐標(biāo)綁定的數(shù)據(jù)源（如果數(shù)據(jù)源為Table，則填寫縱坐標(biāo)要顯示的字段名稱，縱坐標(biāo)可以有兩個）ChartArea：圖表所屬的繪圖區(qū)域名稱ChartType：圖表類型（柱形、餅形、線形、點形等）Legend：圖表使用的圖例名稱Titles：標(biāo)題集合。width：MSChart的寬度。height：MSChart的高度。常用事件：Series1.Points.DataBind()

綁定數(shù)據(jù)點集合，如果要在一個MSChart控件的一個繪圖區(qū)(ChartArea)內(nèi)添加多個不同數(shù)據(jù)源的圖表，就用這個主動綁定數(shù)據(jù)集合的方法?？梢詫⒈碇兄付ㄗ侄蔚闹到壎ǖ街付ǖ淖鴺?biāo)軸上。MSChart1.DataBind()

給整個MSChart綁定一個數(shù)據(jù)源，該MSChart中的圖表全部可以使用該數(shù)據(jù)源作為統(tǒng)計來源。ASP.NET3.5圖表控件親密接觸標(biāo)簽：

3d

屬性

序列

mschart

圖例

分類：

NET2009-09-0414:43【51CTO快譯】圖表是一種直觀易懂的顯示信息的方式，為了在.Net應(yīng)用程序中支持圖表，微軟在.NetSP1和VisualStudio2008中提供了一個插件以支持強(qiáng)壯的圖表，再也不用花錢購買昂貴的、有專利權(quán)的軟件了。為了能夠創(chuàng)建本文所說的圖表，你需要安裝MicrosoftChartControlsforMicrosoft.NETFramework3.5和MicrosoftChartControlsadd-onforMicrosoftVisualStudio2008。如果你對圖表還不熟悉，那就仔細(xì)閱讀本文吧。ChartAreasChartAreas屬性是ChartArea對象的集合，ChartArea負(fù)責(zé)顯示容器的屬性或圖表的背景，由于不止一個，這就意味著MSChart控件可以包含多個圖表。

在使用多個ChartAreas時理解下面幾點內(nèi)容非常重要：在技術(shù)上可以控制ChartArea的位置，因此多個ChartArea可以疊加，但不推薦這么做，建議在MSChart控件內(nèi)的獨立區(qū)域內(nèi)繪制它們，為了合并或覆蓋數(shù)據(jù)點，推薦在一個ChartArea內(nèi)使用多個序列，后面將會有介紹。默認(rèn)情況下，控件會為你自動調(diào)整大小和位置。單個ChartArea將會獨立調(diào)整以適應(yīng)數(shù)據(jù)，正如上圖所顯示的，第二個ChartArea中的Y值更大，數(shù)據(jù)點也更少。多個ChartArea允許你使用多個不相容的ChartTypes（序列對象屬性，控制圖表的顯示類型，如條形、柱狀和餅狀）顯示圖表，圖表任然顯示在相同的MSChart控件內(nèi)。對于單個ChartArea，有許多獨立的屬性可以設(shè)置和調(diào)整，這樣你就可以自行調(diào)整圖表區(qū)域以滿足不同的需要，它的大部分屬性和面板控件的屬性都差不多，因此這里我們就不多說了，只說一下ChartArea唯一的屬性，下面是這些唯一屬性的清單：3D樣式：使用ChartArea的Area3DStyle屬性和子屬性，我們可以創(chuàng)建漂亮的、十分搶眼的3D圖表，無論是在設(shè)計器中還是在代碼中都必需將Enable3D屬性設(shè)置為TRUE，其余的參數(shù)可以通過調(diào)整旋轉(zhuǎn)、視角、照明方式和其它3D元素，讓一個圖像看起來具有3D效果。

坐標(biāo)軸控制和樣式：坐標(biāo)軸集合包括x軸和y軸，以及第二個x軸和y軸，這四個項目的屬性允許你設(shè)置樣式、設(shè)置標(biāo)簽、定義間隔、設(shè)置工具提示、設(shè)置縮放等，如果你的圖標(biāo)要求精確的間隔、標(biāo)簽或其它特殊的顯示需要，你可以使用這些屬性。例如，你可以顛倒坐標(biāo)軸的值，或控制如何在x軸上顯示標(biāo)簽。如果你使用圖表顯示實時信息，可以使用IntervalType屬性來配置基于日期和時間顯示數(shù)據(jù)點。選擇光標(biāo)：如果你對用戶使用鼠標(biāo)選擇數(shù)據(jù)點或點擊和拖拉范圍非常感興趣，這個時候就要用到CursorX和CursorY屬性了，你可以啟用選擇，并設(shè)置最初的光標(biāo)位置或范圍。Series和ChartAreas屬性一樣，Series屬性是一個集合。單個ChartAreas實例包括3個重要的屬性：ChartArea屬性、ChartType屬性和Points集合屬性。ChartArea：識別使用哪個ChartArea。ChartType：識別表示數(shù)據(jù)時使用的圖標(biāo)類型，基本的類型有條形、柱狀、餅狀和線狀，還有一些高級選項，如K線圖、曲線圖、追星圖等。Points：它是DataPoint對象的集合，包括x值和y值，它們是繪在圖表上的序列的一部分，數(shù)據(jù)綁定時最常用的增加數(shù)據(jù)點的方法，本文后面會做介紹。Series實例上的其他常用屬性和人們廣泛了解的還包括：Color：這個屬性用于單獨設(shè)置每個數(shù)據(jù)點序列的顏色，默認(rèn)情況下，這個屬性是空白的，控件會自動改變顏色，以保證將多個序列區(qū)分開來。IsValueShownAsLabel：將這個屬性的值設(shè)為TRUE后（默認(rèn)是FLASE），圖表將顯示每個數(shù)據(jù)點的Y值。

在講多個序列實例合并到一個ChartArea中時，例如下面兩個獨立的圖表，每個圖表都包括6個數(shù)據(jù)點。

假設(shè)你想比較這兩個圖表中的數(shù)據(jù)點，你可以將這兩個MSChart控件放在一起，相互挨著，也可以在一個圖表中使用兩個ChartAreas，這兩種方式都沒問題，但都不能給你很好的視覺比較效果，這就是為什么MSChart要合并數(shù)據(jù)點，讓你可以肩并肩地對比數(shù)據(jù)。將第二個圖表中的數(shù)據(jù)作為第二個序列實例添加到第一個圖表中，一下子就從視覺上改善了對比的效果。

使用多個序列實例時，記住每個序列使用的ChartType非常重要，不是所有ChartType選項放在一起都是兼容的?？偟恼f來，圖表控件的層次如下：MSChart控件有零到多個ChartAreas，一個ChartAreas有零到多個序列（Series），一個序列有零到多個數(shù)據(jù)點（DataPoints）。數(shù)據(jù)綁定數(shù)據(jù)可以在設(shè)計時或運行時綁定，在設(shè)計時綁定要使用到數(shù)據(jù)源配置向?qū)?，在MSChart控件數(shù)據(jù)源屬性下拉按鈕中可以找到它，如果你已經(jīng)配置過數(shù)據(jù)源，你可以在下拉列表中進(jìn)行選擇。圖表函數(shù)DataBind()：綁定數(shù)據(jù)源的基礎(chǔ)函數(shù)。DataBindTable()：綁定圖表到特定的數(shù)據(jù)表，但不允許綁定多個Y值，每個序列不同的數(shù)據(jù)源或x值、y值有不同的數(shù)據(jù)源。DataBindCrossTab()：將圖表綁定到一個數(shù)據(jù)源，并允許基于一個數(shù)據(jù)列進(jìn)行分組，在具體指定的列上每個唯一的值將自動創(chuàng)建一個單獨的序列。數(shù)據(jù)點函數(shù)DataBind()：綁定一個序列到單一的數(shù)據(jù)源，并允許其它屬性綁定到同一個數(shù)據(jù)源（如標(biāo)簽、工具提示、圖例文本等）。DataBindXY()：允許將x值和y值綁定到獨立的數(shù)據(jù)源，它也用于為每個序列綁定單獨的數(shù)據(jù)源。DataBindY()：僅綁定序列中數(shù)據(jù)點的Y值。數(shù)據(jù)源配置好后，MSChart控件可以綁定所有的實現(xiàn)了IEnumerable接口的對象，包括但不限于DataReader、DataSet、Array和List。也允許綁定SqlCommand、OleDbCommand、SqlDataAdapters和OleDbDataAdapter對象。圖例圖例屬性也是一個集合（叫做圖例對象），為了快速理解使用圖例可以做什么，可以把它想象成一個簡單的表，假設(shè)你有一個表格，默認(rèn)有兩列，你可以從前面的例子看出，使用序列實例名的默認(rèn)設(shè)置和序列的顏色，圖例可以通過添加額外的單元列到CellColumn集合上進(jìn)行擴(kuò)展，還可以添加列標(biāo)題，便于更好地理解圖例。在下面的例子，標(biāo)題“Name”和“Color”已經(jīng)添加到默認(rèn)圖例實例上。

每個序列的圖例文本由序列自身控制，在每個序列實例上使用LegendText屬性以改變圖表上圖例的文本，你也可以給圖例一個標(biāo)題。在下面的例