ComponentOne Studio Enterprise 是最大最全面的組件工具集，能夠支持 Windows 、 Web 和移動(dòng)程序所有層面的開(kāi)發(fā)。本人目前只使用其 WebChart 組件，現(xiàn)整理分享之。

一、 WebChart 介紹
??? ComponentOne WebChart for .NET 是一種強(qiáng)大、通用并且使用方便的圖表生成工具。程序員能使用 WebChart 創(chuàng)建完全面向功能，用戶交互式圖表。應(yīng)用其廣泛的特性和多樣的圖表類型能準(zhǔn)確的顯示復(fù)雜的數(shù)據(jù)集合并創(chuàng)建用戶友好，專業(yè)級(jí)的圖表應(yīng)用程序。
??? WebChart 包含:
??????2D 圖表控件，可以以柱狀圖， X-Y 坐標(biāo)圖，面積圖，餅圖，雷達(dá)圖，極坐標(biāo)圖以及組合圖表形式顯示數(shù)據(jù)。
??????3D 圖表控件，可以創(chuàng)建 3D 表面圖，輪廓圖和柱狀圖，可讓用戶方便地進(jìn)行旋轉(zhuǎn)，比例縮放或交互式縮放。

???這里只對(duì) 2D 圖表控件作簡(jiǎn)單介紹。

二、安裝

???安裝時(shí)可以選擇是否將 C1WebChart 組件添加到 GAC 中。

???另外，對(duì)于未注冊(cè)版生成的圖表會(huì)出現(xiàn) ComponentOne 的印章，功能沒(méi)有限制。

三、使用

1 、創(chuàng)建 .Net Web 應(yīng)用程序，并將 WebChart 添加至 .Net 工具箱
??? 打開(kāi)工具箱，點(diǎn)擊右鍵選擇“添加移除項(xiàng)”，選擇“ C1WebChart ”。如果安裝時(shí)未將 C1WebChart 添加到 GAC 中，可以將安裝目錄下的 dll 組件 copy 至 Web 應(yīng)用 bin 目錄下，然后添加。

2 、將 WebChart 添加到應(yīng)用程序中
??? 在工具欄添加以后，將其拖拽至頁(yè)面中。這是會(huì)出現(xiàn)一個(gè)默認(rèn)的 WebChart 。
??? 但是運(yùn)行程序的話，還需要在 Web.config 文件的 <system.web> 標(biāo)簽中添加以下內(nèi)容：

< httpHandlers >
???? < add? verb ="*" ?path ="c1chartimage.aspx" ?type ="C1.Web.C1WebChart.ImageHttpHandler,C1.Web.C1WebChart" />
</ httpHandlers >

??? 該標(biāo)簽可以通過(guò)右鍵點(diǎn)擊頁(yè)面中的 WebChar 控件，選擇“ HttpHandler string to clipboard (tagged) ”，直接 copy 至系統(tǒng)剪貼板中。
??? 注：該標(biāo)簽表示使用內(nèi)置 httpHandlers 轉(zhuǎn)換圖表圖像。對(duì)于 Chart Image 的生成，有時(shí)間會(huì)另外介紹。
??? 完成以上步驟，就可以運(yùn)行應(yīng)用程序看到一個(gè)使用默認(rèn)樣式以及隨機(jī)數(shù)據(jù)生成的圖表。

3 、 WebChart 配置
??? WebChart 提供了可視化的設(shè)計(jì)器，并且號(hào)稱不使用任何代碼完成數(shù)據(jù)綁定的圖表。現(xiàn)在只對(duì)設(shè)計(jì)器的使用作簡(jiǎn)單介紹。
??? 右鍵點(diǎn)擊頁(yè)面上的 WebChat ，選擇“ Chart Wizard ”，可以按照步驟設(shè)置 WebChar 圖表的類型，簡(jiǎn)單屬性，以及綁定的數(shù)據(jù)序列。
??? 另外，還可以使用“ Chart properties ”設(shè)置圖表類型以及其他的一些屬性，并且可以隨時(shí)看到圖表效果，清晰明了。
??? 當(dāng)然了，你還可以在 .Net 的屬性窗口中看到 WebChart 的所有屬性，如果對(duì) WebChart 比較熟悉，在這里設(shè)置也是很方便的。

4 、 WebChar 交互式設(shè)計(jì)
??? 你可以為生成的圖表添加動(dòng)態(tài)的 tooltip 、 link 以及客戶端腳本。圖表的所有部件都包含在 ImageAreas 集合中，你可以通過(guò)屬性窗口編輯 ImageAreas 集合，也可以添加相應(yīng)相應(yīng)代碼實(shí)現(xiàn)該功能。 例：

// 設(shè)置圖表區(qū)域的鏈接
C1WebChart1.ImageAreas.GetByName( " ChartArea " ).HRef? = " http://www.sina.com.cn " ;

// 設(shè)置圖標(biāo)數(shù)據(jù)區(qū)域的Tooltip（在折線圖中，將鼠標(biāo)移至數(shù)據(jù)點(diǎn)的符號(hào)上會(huì)看到效果）
C1WebChart1.ImageAreas.GetByName( " ChartData " ).Tooltip? = ? " X={#XVAL},?Y={#YVAL:c} " ;
// 注：#XVAL為x坐標(biāo)軸值，#YVAL為y坐標(biāo)軸值。類似關(guān)鍵字可在幫助中查找。

// 添加鼠標(biāo)點(diǎn)擊事件
C1WebChart1.ImageAreas.GetByName( " ChartArea " ).Attributes? = ? " onclick=window.open('url.com') " ;

5 、為 WebChart 添加數(shù)據(jù)
??? 應(yīng)用程序圖表數(shù)據(jù)大多來(lái)自外部數(shù)據(jù)庫(kù)，也可以在程序中生成動(dòng)態(tài)數(shù)據(jù)，但是無(wú)論使用哪種方式，都必須將數(shù)據(jù)添加至 WebChart 的 ChartDataSeries 中。簡(jiǎn)單示例如下：

private ? void ?Page_Load( object ?sender,?EventArgs?e)
{
???? // ?get?dataset?(from?db?or?cache)
????DataSet?ds? = ?GetDataSet();
???? // ?create?an?array?of?data?points
????PointF[]?data? = ? new ?PointF[dv.Count]
???? for ?( int ?i? = ? 0 ;?i? < ?data.Length;?i ++ )
???? {
???????? float ?y? = ? float .Parse(dv[i][ " ProductSales " ].ToString());
????????data[i]? = ? new ?PointF(i,?y);
????}
???? // ?populate?chart?data?points
????ChartDataSeries?series? = ???_c1webChart.ChartGroups[ 0 ].ChartData.SeriesList[ 0 ];
????series.PointData.CopyDataIn(data);
}

四、結(jié)束?? ?
??? 以上為 WebChart 的簡(jiǎn)單使用，主要介紹了如何使用設(shè)計(jì)器創(chuàng)建圖表。接下來(lái)將會(huì)以實(shí)例介紹如何使用 WebChart 創(chuàng)建折線圖、餅圖、柱形圖，以及如何使用代碼實(shí)現(xiàn)各種圖表效果。