這是我一年前練習寫的小文章，從自己電腦中層層資料夾中挖出的，現在看有一種看日記的感覺。
PDF下載
測試檔下載
使用OWC產生統計圖表
作者:黃偉榮
開發工具：Visual Studio 2005
有時你可能想為你的網站使用統計圖表，用在如投票的圓餅圖、銷售的直條圖，你還是用土方煉鋼的方法嗎，每一次資料一有變動就到PhotoShop重新繪製過嗎？如果是，其不是很累嗎？而且非常沒有效率，也非常沒有及時性，這裡要教你如果使用資料庫，配合工具，動態的產生的統計圖表。
現在比較常用的方法有：
l Crystal Reports (水晶報表)
l OWC (Office Web Components)
l .Net Frameword中System.Drawing命名空間
Crystal Reports是使用圖型化的設計介面，不用動到什麼程式碼，功能強大，只是他是付費的軟體，而且因為功能太多，使用者端還必需要安裝瀏覽程式，如果只是想作一個簡單的統計圖表，用Crystal Reports有點殺雞用牛刀之感，OWC是微軟附在Office中的一個元件(我沒試過有元件但沒有安裝Office可不可以執行)，完全都是要用程式碼撰寫，以圖檔輸出，使用者端完成不用安裝任何的程式，如果你都不想用任伺的元件，想自己繪圖的話，可以使用.Net Frameword中System.Drawing命名空間，System.Drawing命名空間中有很多繪圖類別，自己繪製，當然還有其他的方法，只是不在本範例所以就不多作說明。
如果你想更多了解Crystal Reports坊間上有很此類的書，可以自行參考。
如果你想更多了解OWC可能就比較苦一點，上Google找吧或上MSDN論壇不少人在討論，官方 也有份說明文件可以參考，有安裝Office，就會安裝在電腦中了，2003的路徑C:"Program Files"Common Files"Microsoft Shared"Web Components"11"1028"OWCVBA11.CHM。
如果你想更多了解怎麼用System.Drawing命名空間，最苦，一樣上Google找吧只是這類的文章不多。
現在來談談要怎麼使用OWC輸出統計圖表吧
首先我們先做一個最簡單的，不使用資料庫，最簡單的樣式。
1. 建立一個SimpleChart.aspx
2. 加入Microsoft Office Web Components參考
3. 撰寫程式碼
SimpleChart.aspx
|
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="SimpleChart.aspx.cs" Inherits="_Default" %> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>未命名頁面</title> </head> <body> <form id="form1" runat="server"> <div> <asp:Image ID="Image" runat="server" /></div> </form> </body> </html> |
SimpleChart.aspx.cs
|
using System; using Microsoft.Office.Interop.Owc11; public partial class _Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { ChartSpace 圖表集合 = new ChartSpace(); ChChart 圖表 = 圖表集合.Charts.Add(0);
圖表.HasTitle = true; 圖表.Title.Caption = "OWC測試";
圖表.Axes[0].HasTitle = true; 圖表.Axes[0].Title.Caption = "類"; 圖表.Axes[1].HasTitle = true; 圖表.Axes[1].Title.Caption = "值"; char Tab = Convert.ToChar(9); string 類 = "A" + Tab + "B" + Tab + "C" + Tab + "D"; string 值 = "90" + Tab + "100" + Tab + "50" + Tab + "70"; 圖表.SeriesCollection.Add(0); 圖表.SeriesCollection[0].SetData(ChartDimensionsEnum.chDimCategories, (int)ChartSpecialDataSourcesEnum.chDataLiteral, 類); 圖表.SeriesCollection[0].SetData(ChartDimensionsEnum.chDimValues, (int)ChartSpecialDataSourcesEnum.chDataLiteral, 值); 圖表集合.ExportPicture(MapPath("Temp.jpg"), "Gif", 400, 400); this.Image.ImageUrl = "Temp.jpg"; } } |
這樣就完成了，下圖是執行的結果
現在來做程式碼的解說，SimpleChart.aspx的部分很簡單，所以就不多作說明，這一個範示只作SimpleChart.aspx.cs的說明，程式碼的變數都是用中文，相信對你在了解他是什麼用途應該會比較容易。
|
ChartSpace圖表集合 = new ChartSpace(); ChChart 圖表 = 圖表集合.Charts.Add(0) |
ChartSpace是Microsoft.Office.Interop.Owc11名稱空間下的類別，他是OWC最根部的類別之一，你可以想像他是一個畫版，可以畫很多個圖，ChChart代表畫版中的圖。
這是使用三個圖的畫版範例。
|
圖表.HasTitle = true; 圖表.Title.Caption = "OWC測試";
圖表.Axes[0].HasTitle = true; 圖表.Axes[0].Title.Caption = "類"; 圖表.Axes[1].HasTitle = true; 圖表.Axes[1].Title.Caption = "值"; |
這個部分應該是很容易了解，HasTitle表示要不要顯示標題，Title.Caption表示標題的文字是什麼，也有Font字型等屬性可以調整，Axes代表圖表的軸，設定軸要不要顯示標題，每一個圖表的軸線都不盡相同，直條圖多半都是二個軸，也有二軸以上的圖表，也有零個軸如圖餅圖，這個地方是最容易發生程式的意外(Exception)，在設計的時候別忘了檢查要圖表的類型是幾個軸的，或多或少都會產生意外喔。
|
char Tab = Convert.ToChar(9); string 類 = "A" + Tab + "B" + Tab + "C" + Tab + "D"; string 值 = "90" + Tab + "100" + Tab + "50" + Tab + "70"; 圖表.SeriesCollection.Add(0); 圖表.SeriesCollection[0].SetData(ChartDimensionsEnum.chDimCategories, (int)ChartSpecialDataSourcesEnum.chDataLiteral, 類); 圖表.SeriesCollection[0].SetData(ChartDimensionsEnum.chDimValues, (int)ChartSpecialDataSourcesEnum.chDataLiteral, 值); |
Convert.ToChar(9)代表了Tab鍵的字元，VB.NET的話是使用Chr(9)，數據是由Tab鍵分隔，SeriesCollection代表的圖表的數據集合，像線性圖是可以有好幾個數據，使用SetData方法設定數據，有三個參數，第一個是數據類型，第二個是數據來源的類型，第三個這邊的話就是數據啦，類型都有列在下方，可自行參考。
ChartDimensionsEnum 可為這些 ChartDimensionsEnum 常數之一。
|
chDimBubbleValues |
設定「泡泡」圖上的標記值。 |
|
chDimCategories |
設定要作為類別的值。 |
|
chDimCharts |
會在 HasMultipleCharts 屬性設為 True 時，設定新圖表的來源欄位。 |
|
chDimCloseValues |
設定「股票」圖的收盤價。 |
|
chDimFilter |
設定要放置在篩選軸上的欄位。 |
|
chDimFormatValues |
設定要在格式圖中使用的值。 |
|
chDimHighValues |
設定「股票」圖的最高價。 |
|
chDimLowValues |
設定「股票」圖的最低價。 |
|
chDimOpenValues |
設定「股票」圖的開盤價。 |
|
chDimRValues |
設定「極座標」圖的 R 值。 |
|
chDimSeriesNames |
設定要作為數列名稱的值。 |
|
chDimThetaValues |
設定「極座標」圖的「樞紐角度」值。 |
|
chDimValues |
設定製成圖表的值。 |
|
chDimXValues |
設定 XY（散佈圖）或「泡泡」圖的 x 值。 |
|
chDimYValues |
設定 XY（散佈圖）或「泡泡」圖的 y 值。 |
ChartSpecialDataSourcesEnum 可以是這些ChartSpecialDataSourcesEnum 常數之一。
|
chDataBound |
將指定的物件連結到 DataReference 引數中所指定的外部資料來源。 |
|
chDataLinked |
將指定的物件連結到另一個維度。當您在 Dimension 引數中指定 chDimFormatValues 來建立格式圖時，請使用這個值。 |
|
chDataLiteral |
將指定的物件連結到 DataReference 引數中所指定的文字資料。 |
|
chDataNone |
清除指定的物件。 |
|
圖表集合.ExportPicture(MapPath("Temp.jpg"), "Gif", 400, 400); this.Image.ImageUrl = "Temp.jpg"; |
現在圖表都以經設定好了，可以輸出了，輸出有二個方式：
l ExportPicture 輸出檔案
l GetPicture 輸出成Byte陣列
這邊使用ExportPicture，ExportPicture有四個參數如下表：
|
FileName |
選擇性的 String。檔名和路徑。 |
|
FilterName |
選擇性的 String。指定要使用的圖形副檔名的名稱。支援的副檔名名稱為 GIF、JPG 和 PNG。預設值為 GIF。 |
|
Width |
選擇性的 Long 整數。指定圖形寬度（像素）。 |
|
Height |
選擇性的 Long 整數。指定圖形高度（像素）。 |
在將輸出的檔案路徑，給圖型控制項就大功告成了！！，不過到這邊只能算暸解OWC的一小部分而以，他還有很多功能，值得你去摸索，下列再列出一些OWC方法，讓你的圖表更豐富。
|
//圖表是否顯示圖例 圖表.HasLegend = False //輸出的圖型類型，如下方列表 圖表.Type = ChartChartTypeEnum.chChartTypeColumnClustered; //圖表是否要顯示數據值，請加在圖表.SeriesCollection[0].SetData之後 圖表.SeriesCollection(0).DataLabelsCollection.Add() 圖表.SeriesCollection(0).DataLabelsCollection.Item(0).HasValue = True //是不是要顯示Value 圖表.SeriesCollection(0).DataLabelsCollection.Item(0).Font.Size = 10 //字體大小 圖表.SeriesCollection(0).DataLabelsCollection.Item(0).NumberFormat = "#,##0" //數字格式，這裡是加上千分位 |
ChartChartTypeEnum 可為這些 ChartChartTypeEnum 常數之一。
|
chChartTypeArea |
區域圖 |
|
chChartTypeArea3D |
|
|
chChartTypeAreaOverlapped3D |
|
|
chChartTypeAreaStacked |
|
|
chChartTypeAreaStacked100 |
|
|
chChartTypeAreaStacked1003D |
|
|
chChartTypeAreaStacked3D |
|
|
chChartTypeBar3D |
橫條圖 |
|
chChartTypeBarClustered |
|
|
chChartTypeBarClustered3D |
|
|
chChartTypeBarStacked |
|
|
chChartTypeBarStacked100 |
|
|
chChartTypeBarStacked1003D |
|
|
chChartTypeBarStacked3D |
|
|
chChartTypeBubble |
泡泡圖 |
|
chChartTypeBubbleLine |
|
|
chChartTypeColumn3D |
直條圖 |
|
chChartTypeColumnClustered |
|
|
chChartTypeColumnClustered3D |
|
|
chChartTypeColumnStacked |
|
|
chChartTypeColumnStacked100 |
|
|
chChartTypeColumnStacked1003D |
|
|
chChartTypeColumnStacked3D |
|
|
chChartTypeCombo |
|
|
chChartTypeCombo3D |
|
|
chChartTypeDoughnut |
圓環圖 |
|
chChartTypeDoughnutExploded |
|
|
chChartTypeLine |
折線圖 |
|
chChartTypeLine3D |
|
|
chChartTypeLineMarkers |
|
|
chChartTypeLineOverlapped3D |
|
|
chChartTypeLineStacked |
|
|
chChartTypeLineStacked100 |
|
|
chChartTypeLineStacked1003D |
|
|
chChartTypeLineStacked100Markers |
|
|
chChartTypeLineStacked3D |
|
|
chChartTypeLineStackedMarkers |
|
|
chChartTypePie |
圓餅圖 |
|
chChartTypePie3D |
|
|
chChartTypePieExploded |
|
|
chChartTypePieExploded3D |
|
|
chChartTypePieStacked |
|
|
chChartTypePolarLine |
'對立圖 |
|
chChartTypePolarLineMarkers |
|
|
chChartTypePolarMarkers |
|
|
chChartTypePolarSmoothLine |
|
|
chChartTypePolarSmoothLineMarkers |
|
|
chChartTypeRadarLine |
雷達圖 |
|
chChartTypeRadarLineFilled |
|
|
chChartTypeRadarLineMarkers |
|
|
chChartTypeRadarSmoothLine |
|
|
chChartTypeRadarSmoothLineMarkers |
|
|
chChartTypeScatterLine |
平線圖 |
|
chChartTypeScatterLineFilled |
|
|
chChartTypeScatterLineMarkers |
|
|
chChartTypeScatterMarkers |
|
|
chChartTypeScatterSmoothLine |
|
|
chChartTypeScatterSmoothLineMarkers |
|
|
chChartTypeSmoothLine |
平線圖 |
|
chChartTypeSmoothLineMarkers |
|
|
chChartTypeSmoothLineStacked |
|
|
chChartTypeSmoothLineStacked100 |
|
|
chChartTypeSmoothLineStacked100Markers |
|
|
chChartTypeSmoothLineStackedMarkers |
|
|
chChartTypeStockHLC |
股票圖 |
|
chChartTypeStockOHLC |
有少不部分的圖我也不知道要怎麼輸出，名稱是chChartType + 圖型 + 變化，你可以到EXCEL試著用看看，OWC與EXCEL輸出的圖幾乎是一模一樣的。
結後語
第一次做這類的文件感覺做的不是很好，如果有缺陷處，請多包含，這個教學本來想加入OWC連資料庫，但實際測試，反到不如使用ADO.NET將資料庫的資料讀出來，在組成字串來用方便，所以最就決定不包含OWC連資料庫了。
2006/07/06 偉榮
