現在比較常用的方法有:
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輸出的圖幾乎是一模一樣的。