ComponentOne Studio Enterprise 是最大最全面的組件工具集,能夠支持 Windows 、 Web 和移動程序所有層面的開發。本人目前只使用其 WebChart 組件,現整理分享之。
一、 WebChart 介紹
ComponentOne WebChart for .NET 是一種強大、通用并且使用方便的圖表生成工具。程序員能使用 WebChart 創建完全面向功能,用戶交互式圖表。應用其廣泛的特性和多樣的圖表類型能準確的顯示復雜的數據集合并創建用戶友好,專業級的圖表應用程序。
WebChart 包含:
2D 圖表控件,可以以柱狀圖, X-Y 坐標圖,面積圖,餅圖,雷達圖,極坐標圖以及組合圖表形式顯示數據。
3D 圖表控件,可以創建 3D 表面圖,輪廓圖和柱狀圖,可讓用戶方便地進行旋轉,比例縮放或交互式縮放。
一、 WebChart 介紹
ComponentOne WebChart for .NET 是一種強大、通用并且使用方便的圖表生成工具。程序員能使用 WebChart 創建完全面向功能,用戶交互式圖表。應用其廣泛的特性和多樣的圖表類型能準確的顯示復雜的數據集合并創建用戶友好,專業級的圖表應用程序。
WebChart 包含:
2D 圖表控件,可以以柱狀圖, X-Y 坐標圖,面積圖,餅圖,雷達圖,極坐標圖以及組合圖表形式顯示數據。
3D 圖表控件,可以創建 3D 表面圖,輪廓圖和柱狀圖,可讓用戶方便地進行旋轉,比例縮放或交互式縮放。
這里只對
2D 圖表控件作簡單介紹。
二、安裝
二、安裝
安裝時可以選擇是否將 C1WebChart 組件添加到 GAC 中。
另外,對于未注冊版生成的圖表會出現 ComponentOne 的印章,功能沒有限制。
三、使用
三、使用
1 、創建 .Net Web 應用程序,并將 WebChart 添加至 .Net 工具箱
打開工具箱,點擊右鍵選擇“添加移除項”,選擇“ C1WebChart ”。如果安裝時未將 C1WebChart 添加到 GAC 中,可以將安裝目錄下的 dll 組件 copy 至 Web 應用 bin 目錄下,然后添加。
打開工具箱,點擊右鍵選擇“添加移除項”,選擇“ C1WebChart ”。如果安裝時未將 C1WebChart 添加到 GAC 中,可以將安裝目錄下的 dll 組件 copy 至 Web 應用 bin 目錄下,然后添加。
2 、將 WebChart 添加到應用程序中
在工具欄添加以后,將其拖拽至頁面中。這是會出現一個默認的 WebChart 。
但是運行程序的話,還需要在 Web.config 文件的 <system.web> 標簽中添加以下內容:
在工具欄添加以后,將其拖拽至頁面中。這是會出現一個默認的 WebChart 。
但是運行程序的話,還需要在 Web.config 文件的 <system.web> 標簽中添加以下內容:



該標簽可以通過右鍵點擊頁面中的
WebChar 控件,選擇“ HttpHandler string to clipboard (tagged) ”,直接 copy 至系統剪貼板中。
注:該標簽表示使用內置 httpHandlers 轉換圖表圖像。對于 Chart Image 的生成,有時間會另外介紹。
完成以上步驟,就可以運行應用程序看到一個使用默認樣式以及隨機數據生成的圖表。
注:該標簽表示使用內置 httpHandlers 轉換圖表圖像。對于 Chart Image 的生成,有時間會另外介紹。
完成以上步驟,就可以運行應用程序看到一個使用默認樣式以及隨機數據生成的圖表。
3 、 WebChart 配置
WebChart 提供了可視化的設計器,并且號稱不使用任何代碼完成數據綁定的圖表。現在只對設計器的使用作簡單介紹。
右鍵點擊頁面上的 WebChat ,選擇“ Chart Wizard ”,可以按照步驟設置 WebChar 圖表的類型,簡單屬性,以及綁定的數據序列。
另外,還可以使用“ Chart properties ”設置圖表類型以及其他的一些屬性,并且可以隨時看到圖表效果,清晰明了。
當然了,你還可以在 .Net 的屬性窗口中看到 WebChart 的所有屬性,如果對 WebChart 比較熟悉,在這里設置也是很方便的。
WebChart 提供了可視化的設計器,并且號稱不使用任何代碼完成數據綁定的圖表。現在只對設計器的使用作簡單介紹。
右鍵點擊頁面上的 WebChat ,選擇“ Chart Wizard ”,可以按照步驟設置 WebChar 圖表的類型,簡單屬性,以及綁定的數據序列。
另外,還可以使用“ Chart properties ”設置圖表類型以及其他的一些屬性,并且可以隨時看到圖表效果,清晰明了。
當然了,你還可以在 .Net 的屬性窗口中看到 WebChart 的所有屬性,如果對 WebChart 比較熟悉,在這里設置也是很方便的。
4 、 WebChar 交互式設計
你可以為生成的圖表添加動態的 tooltip 、 link 以及客戶端腳本。圖表的所有部件都包含在 ImageAreas 集合中,你可以通過屬性窗口編輯 ImageAreas 集合,也可以添加相應相應代碼實現該功能。 例:
你可以為生成的圖表添加動態的 tooltip 、 link 以及客戶端腳本。圖表的所有部件都包含在 ImageAreas 集合中,你可以通過屬性窗口編輯 ImageAreas 集合,也可以添加相應相應代碼實現該功能。 例:









5
、為 WebChart
添加數據
應用程序圖表數據大多來自外部數據庫,也可以在程序中生成動態數據,但是無論使用哪種方式,都必須將數據添加至 WebChart 的 ChartDataSeries 中。簡單示例如下:
應用程序圖表數據大多來自外部數據庫,也可以在程序中生成動態數據,但是無論使用哪種方式,都必須將數據添加至 WebChart 的 ChartDataSeries 中。簡單示例如下:















四、結束
以上為 WebChart 的簡單使用,主要介紹了如何使用設計器創建圖表。接下來將會以實例介紹如何使用 WebChart 創建折線圖、餅圖、柱形圖,以及如何使用代碼實現各種圖表效果。
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索:z360901061

微信掃一掃加我為好友
QQ號聯系: 360901061
您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點擊下面給點支持吧,站長非常感激您!手機微信長按不能支付解決辦法:請將微信支付二維碼保存到相冊,切換到微信,然后點擊微信右上角掃一掃功能,選擇支付二維碼完成支付。
【本文對您有幫助就好】元
