ASP中利用OWC控件實現圖表功能詳解

穩萊

ASP中利用OWC控件實現圖表功能詳解
  在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=BIG5">
<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>

 給當前日誌評分:
Loading Vote
正在讀取評分資料...


文章來自: Tank部落格
引用通告: 查看所有引用 | 我要引用此文章
Tags: 圖表
相關日誌:

評論: 0 | 引用: 0 | 查看次數: -
發表評論
暱 稱:
密 碼: 遊客發言不需要密碼.
內 容:
驗證碼: 驗證碼
選 項:
雖然發表評論不用註冊,但是為了保護您的發言權,建議您註冊帳號.