ASP中利用OWC控件實現圖表功能詳解 - 中國WEB開發者網絡 (http://www.webasp.net) -- 技術教程 (http://www.webasp.net/article/) --- ASP中利用OWC控件實現圖表功能詳解 (http://www.webasp.net/article/18/17228.htm) |
| -- 作者:未知 -- 發佈日期: 2005-03-29 |
| 在ASP中利用OWC(Office Web Components)控件可輕鬆實現各種圖表功能,如餅圖,簇狀柱型圖,折線圖等。
在下面的代碼中我詳細的給出了餅圖,簇狀柱型圖,折線圖的使用方法。OWC的更多功能,屬性可參加MSOWCVBA.chm幫助文件(在office 2000的文件夾下大家自己找)。 testOWC.asp <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>ASP中利用OWC控件實現圖表功能詳解</title> </head> <body> <% '下面測試的是一個產品銷量圖 MX1 = "A產品,B產品,C產品,D產品" '數據項目名數組(給出測試數據,實際用的時候從數據庫讀取用","分隔) MX2 = "50,60,20,80" '數據項目值數組 Datestr = "2005-3-24,2005-3-25,2005-3-26,2005-3-27,2005-3-28" '日期 SQARXLstr = "50,100,20,80,89" 'A產品2005-3-24 至 2005-3-28的銷量 SQARXLstr = SQARXLstr & "," & "40,60,20,90,70" 'B產品2005-3-24 至 2005-3-28的銷量 SQARXLstr = SQARXLstr & "," & "20,50,55,25,60" 'C產品2005-3-24 至 2005-3-28的銷量 SQARXLstr = SQARXLstr & "," & "80,20,75,58,100" 'D產品2005-3-24 至 2005-3-28的銷量 %> <br> <center><object id="ChartSpace1" classid="CLSID:0002E500-0000-0000-C000-000000000046" style="width:95%;height:400"></object></center> <br> <center><object id="ChartSpace2" classid="CLSID:0002E500-0000-0000-C000-000000000046" style="width:95%;height:400"></object></center> <br> <center><object id="ChartSpace3" classid="CLSID:0002E500-0000-0000-C000-000000000046" style="width:95%;height:400"></object></center> <script language="vbscript"> Sub Window_OnLoad() '------------------餅圖------------------------------------------------------------- '為數據賦值 categories = split("<%=MX1%>",",") '數據項目名數組 values = split("<%=MX2%>",",") '數據項目值數組 Set cht = ChartSpace1.Charts.Add '添加一個圖標對像 Set c = ChartSpace1.Constants '返回一個對象,此對像允許腳本用戶使用已命名的常量。 cht.Type = c.chChartTypePie '設置圖表類型為餅圖 '-------設置圖表標題---------------------------------------- ChartSpace1.HasChartSpaceTitle = True '指定圖表工作區中包含標題 ChartSpace1.ChartSpaceTitle.Caption = "餅狀圖" '設置圖表工作區標題內容 '有關字體的設置 ChartSpace1.ChartSpaceTitle.Font.Bold = True '設置圖表工作區標題內容是否粗體 ChartSpace1.ChartSpaceTitle.Font.Color = "blue" '設置圖表工作區標題的顏色 ChartSpace1.ChartSpaceTitle.Font.Italic = False '設置圖表工作區標題是否為斜體 ChartSpace1.ChartSpaceTitle.Font.Name = "隸書" '設置圖表工作區標題內容的字體 ChartSpace1.ChartSpaceTitle.Font.Size = 18 '設置圖表工作區標題內容的大小(單位:磅) ChartSpace1.ChartSpaceTitle.Font.Underline = c.owcUnderlineStyleSingle '設置下劃線屬性 '-------設置圖例-------------------------------------------- cht.HasLegend = True '指定圖表工作區中含有圖例 cht.Legend.Font.Size = 9 '其他有關字體項的設置參見設置圖表標題部分 cht.Legend.Position = c.chLegendPositionRight '設置圖例對其方式 cht.SetData c.chDimCategories, c.chDataLiteral, categories cht.SeriesCollection(0).SetData c.chDimValues, c.chDataLiteral, values Set dl = cht.SeriesCollection(0).DataLabelsCollection.Add '添加圖例的數據標記 dl.HasValue = False dl.HasPercentage = True dl.Font.Size = 11 '------------------餅圖(結束)------------------------------------------------ '------------------簇狀柱型圖(開始)-------------------------------------- Set cht = ChartSpace2.Charts.Add '添加一個圖標對像 Set c = ChartSpace2.Constants '返回一個對象,此對像允許腳本用戶使用已命名的常量。 cht.Type = c.chChartTypeColumnClustered '設置圖表類型為折線圖 '-------設置圖表標題---------------------------------------- ChartSpace2.HasChartSpaceTitle = True '指定圖表工作區中包含標題 ChartSpace2.ChartSpaceTitle.Caption = "柱狀圖" '設置圖表工作區標題內容 '有關字體的設置 ChartSpace2.ChartSpaceTitle.Font.Bold = True '設置圖表工作區標題內容是否粗體 ChartSpace2.ChartSpaceTitle.Font.Color = "blue" '設置圖表工作區標題的顏色 ChartSpace2.ChartSpaceTitle.Font.Italic = False '設置圖表工作區標題是否為斜體 ChartSpace2.ChartSpaceTitle.Font.Name = "隸書" '設置圖表工作區標題內容的字體 ChartSpace2.ChartSpaceTitle.Font.Size = 18 '設置圖表工作區標題內容的大小(單位:磅) ChartSpace2.ChartSpaceTitle.Font.Underline = c.owcUnderlineStyleSingle '設置下劃線屬性 cht.SetData c.chDimCategories, c.chDataLiteral, categories '橫項(分類軸) cht.SeriesCollection(0).SetData c.chDimValues, c.chDataLiteral, values Set dl = cht.SeriesCollection(0).DataLabelsCollection.Add '添加圖例的數據標記 dl.HasValue = True dl.HasPercentage = False dl.Font.Size = 9 dl.Font.Color = "red" dl.Position = c.chLegendPositionRight '設置縱向數值屬性 Set categoryAxis = cht.Axes(c.chAxisPositionBottom) categoryAxis.Font.Size = 9 '設置分類組屬性 Set categoryAxis = cht.Axes(c.chAxisPositionLeft) categoryAxis.Font.Size = 9 '------------------簇狀柱型圖(結束)-------------------------------------- '------------------折線圖---------------------------------------------------------- SParr = split("<%=MX1%>",",") Datearr = split("<%=Datestr%>",",") Set cht = ChartSpace3.Charts.Add '添加一個圖標對像 Set c = ChartSpace3.Constants '返回一個對象,此對像允許腳本用戶使用已命名的常量。 cht.Type = c.chChartTypeLineMarkers '設置圖表類型為折線圖 '-------設置圖表標題---------------------------------------- ChartSpace3.HasChartSpaceTitle = True '指定圖表工作區中包含標題 ChartSpace3.ChartSpaceTitle.Caption = "日銷量折線圖" '設置圖表工作區標題內容 '有關字體的設置 ChartSpace3.ChartSpaceTitle.Font.Bold = True '設置圖表工作區標題內容是否粗體 ChartSpace3.ChartSpaceTitle.Font.Color = "blue" '設置圖表工作區標題的顏色 ChartSpace3.ChartSpaceTitle.Font.Italic = False '設置圖表工作區標題是否為斜體 ChartSpace3.ChartSpaceTitle.Font.Name = "隸書" '設置圖表工作區標題內容的字體 ChartSpace3.ChartSpaceTitle.Font.Size = 18 '設置圖表工作區標題內容的大小(單位:磅) ChartSpace3.ChartSpaceTitle.Font.Underline = c.owcUnderlineStyleSingle '設置下劃線屬性 '-------設置圖例-------------------------------------------- cht.HasLegend = True '指定圖表工作區中含有圖例 cht.Legend.Font.Size = 9 '其他有關字體項的設置參見設置圖表標題部分 cht.Legend.Position = c.chLegendPositionBottom '設置圖例對其方式 cht.SetData c.chDimSeriesNames, c.chDataLiteral, SParr '系列 cht.SetData c.chDimCategories, c.chDataLiteral, Datearr '橫項(分類軸) '設置縱向數值屬性 Set categoryAxis = cht.Axes(c.chAxisPositionBottom) categoryAxis.Font.Size = 9 '設置分類組屬性 Set categoryAxis = cht.Axes(c.chAxisPositionLeft) categoryAxis.Font.Size = 9 values = split("<%=SQARXLstr%>",",") for i = 0 to ubound(SParr) valuetemp = "" for j = i*(ubound(Datearr)+1) to (i+1)*(ubound(Datearr)+1)-1 '按天讀取數據 valuetemp = valuetemp & "," & values(j) next valuearr = split(mid(valuetemp,2),",") cht.SeriesCollection(i).SetData c.chDimValues, c.chDataLiteral, valuearr Set dl = cht.SeriesCollection(i).DataLabelsCollection.Add '添加圖例的數據標記 dl.HasValue = True dl.HasPercentage = False dl.Font.Size = 9 next '------------------折線圖(結束)--------------------------------------------------- End Sub </script> </body> </html> |
| webasp.net |