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

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

???這里只對 2D 圖表控件作簡單介紹。

二、安裝

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

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

三、使用

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

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

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

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

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

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

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

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

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

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

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 的簡單使用，主要介紹了如何使用設(shè)計器創(chuàng)建圖表。接下來將會以實例介紹如何使用 WebChart 創(chuàng)建折線圖、餅圖、柱形圖，以及如何使用代碼實現(xiàn)各種圖表效果。