2007年5月7日

系列最后一章，柱形圖的制作 。

?

一、 生成柱形圖

設置圖表類型。

?

對于數據源的添加和其他圖表相同，這里就不再說明。

?

二、 柱形圖的樣式設計

1 ）填充色的改變

獲取了 ChartDataSeries 對象之后，設置 FillStayle 的 Color1 屬性即會改變柱形的填充色。

?

2 ）漸變色彩的實現

漸變效果需要設置 FillType 為 Gradient 類型，并且必須設置 Color2 屬性。

?

漸變效果圖如下：

漸變效果源碼下載地址：

http://www.aygfsteel.com/Files/kdboy/ChartBar1.rar ?
?

3 ）多種顏色填充效果

說明：對于同一序列的柱形只能使用相同填充顏色，實現多種顏色填充，只能使用不同數據序列。所以，假如你只有一組數據，那么可以使用這種效果來制作圖表。

?

首先，需要設置圖標為疊加樣式。

?

其次，需要將每條數據放置在不同的數據序列中，該序列顏色系統會自動分配。也可以在這里設置每個序列的顏色。

?

效果圖如下：

多種顏色填充 源碼下載地址：

http://www.aygfsteel.com/Files/kdboy/ChartBar2.rar ?
?

三、 柱形圖的 3D 效果

與餅圖的 3D 效果相同，只需增加一下代碼即可：

?

效果圖如下：

源碼略。

?

四、 其他。

對于柱形圖的邊線，可以設置 ChartGroup 的 ShowOutline 屬性來禁止顯示。改變其顏色，我也不知如何設置。

代碼如下：

效果就是這樣：

?

五、 結束

關于 WebChart 就介紹到這里，謝謝關注。

  2007年3月21日

這次演示餅圖制作，簡單介紹餅圖的樣式效果及 PlotArea 對象的一些屬性。

?

一、生成餅圖

設置圖表類型。?
?

這里和折線圖一樣。

?

為圖表添加數據。

這里與折線圖不同的是餅圖只需設置坐標軸的 Y 值即可，所有序列的相同索引的數據組合成一個餅圖。這里將每一條數據放在一個新的數據序列里，并且每個序列都只有一個元素。這樣，所有數據就會呈現在一個餅圖中。如圖：

這個就是默認的餅圖樣式，是不是少點什么呢？

接下來，介紹樣式的設置。

?

二、餅圖樣式設計

1）? 添加圖例

設置 Legend 對象的 Visible 屬性為 true ，圖例就會顯示出來。這時圖例的標簽默認為序列的名稱。

?

設置圖例標簽的顯示內容。為了代碼簡潔也可以在添加數據的同時設置。

?

另外，我們還可以使用 Legend 對象（圖例對象）設置圖例的顯示樣式。如：

設置圖例顯示位置。

?

其他一些屬性，例如 Orientation 設置圖例顯示方向（以縱向顯示或橫向顯示）等，不作詳細介紹，可自己嘗試使用。

?

2）? 為了讓數據更加直觀，可在餅圖添加標簽

首先，實例化標簽并設置標簽內容及相關屬性。

然后使用 AttachMethodData 對象設置標簽附加在圖表中的位置。

GroupIndex 是指圖表索引。（第一篇文章提到過 WebChart 默認支持 2 個圖表）

SeriesIndex 是指序列索引。

PointIndex? 是指序列中的元素索引。

?

設置完成，效果圖如下：

?

三、 3D 效果的實現 。

1 ）開啟 3D 效果。

以 3D 樣式顯示，該步驟必須存在。

?

3）? 設置 3D 樣式

3D 樣式是使用 PlotArea 對象的View3D屬性來設置。

主要就是以上四個屬性的設置。

顯示效果如下：

?

四、補充概念

或許之前說到的各圖形區域比較容易混淆，下面以圖形介紹個圖形區域：

?

灰色 為整個 WebChart 區域，對應對象就是 this.C1WebChart1 。

桔黃色 為圖表區域，對應對象為 this.C1WebChart1.ChartArea 。

綠色 為繪圖區，對應對象為 this.C1WebChart1.ChartArea.PlotArea 。

紅色 為圖表的上標題，對應對象為 this.C1WebChart1.Header 。

藍色 為圖表的下標題，對應對象為 this.C1WebChart1.Footer 。

?

使用相關對象可以設置個區域的樣式效果。了解這些可以使用屬性窗口快速設置一些簡單樣式。

?

五、結束

我希望通過一些實例能夠比較全面的介紹 WebChart 的主要對象的使用。在下一次，會演示柱形圖的制作。本次實例的完整代碼下載地址如下：

?http://www.aygfsteel.com/Files/kdboy/ChartPie.rar

  2007年3月8日

??? 本篇文章將演示如何使用 WebChart 制作折線圖。并通過示例介紹數據對象一些相關屬性以及 ChartArea 的 Axis 的相關屬性設置，并演示使用 WebChart 做交互式的設計。
??? 注：版本 ComponentOne.Studio.Enterprise.2006.v2?
??? ????環境 .NET Compact Framework 1.1

?

一、生成折線圖

1) 獲取 WebChart 的第一個圖標，并設置其圖表類型為折線圖

2) 為圖表添加數據

獲取數據。這里可以根據自己的業務需求，或自動生成或查詢數據庫，返回一個 DataSet 對象。

將數據封裝在 PointF 類型的對象數組中。這里可以使用任何方式封裝數據。

?

WebChart 默認會有 4 個數據序列，為了不讓其他序列影響輸出效果，清除序列集合中的所有序列，并且創建一個新的序列。

?

將數據添加至新建的數據序列中。這里使用 PointData 屬性，同時為 X 、 Y 坐標付值。

?

到這里，我們便可以運行程序，看到一個有我們的數據生成的一個默認樣式的折線圖。下面來介紹使用 ChartDataSeries 對象設置圖形的樣式。

?
二、使用 ChartDataSeries 對象設置折線圖樣式

關于 ChartDataSeries 對象，之前已作了簡單介紹，這里直接以代碼介紹其部分屬性。

設置折線為平滑曲線。

設置折線顏色為紅色。

LineStyle 的相關屬性：

Pattern - 設置折線的類型 （實心直線、點線等），其值為 LinePatternEnum 枚舉類型。

Thickness – 設置折線厚度

設置折線上數據點的符號形狀為倒三角，顏色為藍色。

還可以通過 SymbolStyle 設置符號的大小，符號邊線的顏色及厚度。可以自己嘗試。

?

三、坐標軸的設置

獲取圖表的 X 坐標軸。

?

設置坐標軸刻度標簽顯示方式，這里使用 ValueLabels ，有用戶來制定標簽內容。默認為 Values 模式，有系統自動標注標簽內容。

設置坐標軸刻度標簽顯示內容。

ax.ValueLabels.Add 的第一個參數為圖表數據的 x 值，第二個參數為對應顯示的標簽文本。

?

設置刻度標簽的旋轉角度。

對于標簽內容還可以使用屬性 AnnoFormatString 來設置內容的格式。

設置坐標軸標題。

設置坐標軸標題的旋轉角度。當坐標軸標題設置以后生效。

對于坐標軸標題，還可以設置它的 對齊方式，使用屬性 Alignment 。

?

設置坐標軸的最大長度

相應的還有 Min 屬性設置坐標軸的最小長度， Origin 屬性 設置坐標軸原點。對應這些，還有 AutoMax 、 AutoMin 、 AutoOrigin 等 bool 類型的屬性，表示是否自動設置。

對于刻度值的也有類似屬性： UnitMajor 、 UnitMinor 設置主、副刻度的單位長度。以及對應的 auto 屬性等。

?

除此之外，還有一些特殊屬性：

Reverse 屬性：使坐標軸反轉。

ScrollBar 屬性：為坐標軸添加滾動條。

Visible 屬性：可以隱藏坐標軸。

OnTop 屬性：可以設置坐標軸顯示在圖表上方。

等等。

在我們使用 .NET 開發環境中，會有智能感知的相關提示，對于對象屬性的使用會簡單得多。這里只介紹了主要的屬性，其他屬性可根據需要自行嘗試。

?

四、交互式設計

為圖表區域增加鏈接。

為折線上的數據點增加鼠標提示。（鼠標移至數據點的符號上，會提示你所設置文本）

C1WebChart1.ImageAreas.GetByName( " Footer " ).Attributes? = ? " onclick=window.open('http://kdboy.spaces.live.com') " ;

為圖表底部添加點擊事件。

?

五、補充

這里設置圖標下標題，并讓圖表 Footer 區域顯示在圖表中。

對于 C1WebChart 的相關屬性比較簡單，不再一一演示。

?

六、結束

以上是折線圖的部分代碼，完整示例可以通過下面鏈接下載。
下載地址：http://www.aygfsteel.com/Files/kdboy/2DChartXYPlot.rar

?

附錄：

效果圖

  2007年3月4日

??? 接下來的文章主要介紹如何使用代碼設置實現 WebChart 圖表。在制作 WebChart 制作圖表之前，首先了解以下 WebChart 的主要對象。熟悉了各對象的功能，站在一定高度使用 WebChar ，會使我們的設計事半功倍。

??????

一、 WebChart 的數據對象
??? WebChart 中的數據對象有著特定的層級關系，如圖：
??? 使用 WebChart 可以創建兩個圖表，每個圖表對應一個 ChartGroup 。 ChartGroups 將這兩個圖表組織在 ChartGroupsCollection 中，通過 ChartGroup 的屬性 ChartGroupsCollection 的下標索引或者使用 ChartGroups 中的屬性 Group0 或 Group1 均可以返回其中一個圖表，更簡潔的你可以直接使用 ChartGroups 的下標索引也是同樣效果。例：

??? 當然，在大多數情況下我們只需創建一個圖表即可。在我們制作一些圖表的時候會需要設置對象的 GroupIndex 屬性，這里即為指定數據為哪個 ChartGroups 所有。通過 ChartGroup 對象，我們可以設置這個圖表的樣式、數據以及一些效果的顯示。
??? SeriesList 是該圖表的數據序列的集合，它包含所有數據序列 ChartDataSeries 。每個序列對應最終生成的圖表中的一組圖形。例如，在折線圖中創建 5 個數據序列，將會生成一個擁有 5 條折線的圖表。

??? ChartDataSeries 是我們創建圖表的至關重要的一個類，它不僅包含著圖表的數據對象 PointData ，而且還可以通過它設置生成圖表的樣式和效果（這里的樣式和效果僅指數據部分）。
??? 圖表的數據使用 ChartDataArray 存儲，可以通過創建 ChartDataArray 對象，直接給圖表的 XY 同時付值（使用屬性 PiontData ），也可以分別給 X 或 Y 付值。例：

?

二、 WebChart 圖表域對象
??? 除了 ChartGrouups ， ChartArea 是 C1Chart 的另一個非常重要的對象。除去和數據序列相關的圖象，其他部分的樣式效果大多都是通過 ChartArea 來設置。它主要包括對坐標軸的設置（ Axis ） 和 繪圖域的設置(PlotArea)。
??? 現在 這部分不作主要介紹，在之后會以實例實例 簡單介紹 CharArea 。

?

三、關于 C1Chart 的其他屬性
??? 以上是 C1Chart 的兩個最主要的屬性。在 C1Chart 中還包括 ChartStyle 、 Header 以及 Footer 等屬性，分別設置圖表的整體樣式以及頭部、底部的樣式。這些可以使用屬性進行設置，修改之后即可看到效果，要比使用代碼設置更加方便。
??? 另外， C1Chart 還有在第一章中提到的用于交互設計的一些屬性 Attributes 、 Tooltip 等，只不過這個和之前的 ImageAreas 使用區域不同， C1Chart 設置的總是整體區域。
??? 其他就是和普通控件一樣的高度寬度等屬性 ….

?

四、結束
??? 關于 WebChar 對象簡單介紹至此，詳細的內容可以參考幫助內容，接下來以創建折線圖的實例對以上對象進行講解。

  2007年3月3日

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

一、 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 目錄下，然后添加。

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

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

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

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

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

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

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

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

5 、為 WebChart 添加數據
??? 應用程序圖表數據大多來自外部數據庫，也可以在程序中生成動態數據，但是無論使用哪種方式，都必須將數據添加至 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);
}

四、結束?? ?
??? 以上為 WebChart 的簡單使用，主要介紹了如何使用設計器創建圖表。接下來將會以實例介紹如何使用 WebChart 創建折線圖、餅圖、柱形圖，以及如何使用代碼實現各種圖表效果。