1 ''owc.vbs
2 class owc
3 private o
4 '傳入物件
5 public property set set_obj(o_id)
6 set o=o_id
7 end property
8 '畫圖矩形圖
9 'chart_bgcolor_圖表的背景顏色
10 'chartCaption_圖表的標題
11 'chartCaption_fontColor_圖表標題顏色
12 'Interior_Color_矩形內的填充顏色
13 'Caption_名稱
14 'categories_名稱數組
15 'values_值數組串
16 public sub bar(chart_bgcolor_,chartCaption_,chartCaption_fontColor_,Interior_Color_,Caption_,categories_,values_)
17 o.Clear
18 set cht = o.Charts.Add
19 set c = o.Constants
20 cht.Type = c.chChartTypeColumnClustered
21 '設背景色或是填充
22 o.Charts(0).PlotArea.Interior.SetSolid chart_bgcolor_
23
24 '加上圖表的標題
25 o.HasChartSpaceTitle = True
26 set cst=o.ChartSpaceTitle
27 cst.Caption = chartCaption_
28 cst.Font.Color = chartCaption_fontColor_
29 cst.Font.Italic = False
30 cst.Font.Name = "Arial"
31 cst.Font.Size = 12
32 cst.Font.Underline = c.owcUnderlineStyleSingle
33
34 '添加數據
35 cht.SetData c.chDimCategories, c.chDataLiteral, categories_
36 cht.SeriesCollection(0).SetData c.chDimValues, c.chDataLiteral, values_
37 '直條的背景色進行設定
38 set sc=o.Charts(0).SeriesCollection(0)
39 sc.Interior.Color=Interior_Color_
40
41 '直條上的顯示設置
42 sc.Caption=Caption_
43 set dl = cht.SeriesCollection(0).DataLabelsCollection.Add
44 dl.HasValue = True
45 dl.HasPercentage = False
46 dl.Font.Size = 9
47 dl.Font.Color = "red"
48 dl.Position = c.chLegendPositionRight
49 dl.NumberFormat = "00.00%"
50 '左邊百分比的屬性設置
51 Set cta = cht.Axes(c.chAxisPositionLeft)
52 cta.Font.Size = 9
53 cta.NumberFormat = "0.0%"
54 cta.MajorUnit = 0.1
55 end sub
56 '多系列矩形圖
57 'chart_bgColor_圖表的背景顏色
58 'chartCaption_圖表的標題
59 'chartCaption_fontColor_圖表標題顏色
60 'color_顏色數組
61 'caption_名稱數組
62 'categories_名稱數組
63 'values_值數組
64 public sub serBar(chart_bgColor_,chartCaption_,chartCaption_fontColor_,color_,caption_,categories_,values_)
65 o.Clear
66 o.Charts.Add
67 Set c = o.Constants
68 '圖表的類型
69 o.Charts(0).type=c.chChartTypeColumnClustered
70 '給繪圖區加背景色
71 o.Charts(0).PlotArea.Interior.SetSolid chart_bgColor_
72 ''加上圖表的標題
73 o.HasChartSpaceTitle = True
74 o.ChartSpaceTitle.Caption = chartCaption_
75 '標題的屬性
76 o.ChartSpaceTitle.Font.Color = chartCaption_fontColor_
77 o.ChartSpaceTitle.Font.Italic = False
78 o.ChartSpaceTitle.Font.Name = "Arial"
79 o.ChartSpaceTitle.Font.Size = 12
80 o.ChartSpaceTitle.Font.Underline = c.owcUnderlineStyleSingle
81 '用循環來新增SeriesCollection以及裡面的內容
82 for i=0 to ubound(caption_)
83 valuetemp=""
84 for j = i*(ubound(categories_)+1) to (i+1)*(ubound(categories_)+1)-1
85 valuetemp = valuetemp & "," & values_(j)
86 next
87 valuearr = split(mid(valuetemp,2),",")
88 o.Charts(0).SeriesCollection.Add
89 o.Charts(0).SeriesCollection(i).Caption = caption_(i)
90 o.Charts(0).SeriesCollection(i).Interior.Color = color_(i)
91 o.Charts(0).SeriesCollection(i).SetData c.chDimCategories, c.chDataLiteral, categories_
92 o.Charts(0).SeriesCollection(i).SetData c.chDimValues, c.chDataLiteral, valuearr
93 set dl = o.Charts(0).SeriesCollection(i).DataLabelsCollection.Add
94 dl.HasValue = True
95 dl.HasPercentage = False
96 dl.Font.Size = 9
97 dl.Font.Color = "red"
98 dl.Position = c.chLegendPositionRight
99 dl.NumberFormat = "00.00%"
100 next
101 ''圖例的設定
102 o.Charts(0).HasLegend = True
103 o.Charts(0).Legend.Font.Size = 9
104 o.Charts(0).Legend.Position = c.chLegendPositionBottom
105 ''左邊百分比的屬性設置
106 Set cta = o.Charts(0).Axes(c.chAxisPositionLeft)
107 cta.Font.Size = 9
108 cta.NumberFormat = "0.00%"
109 cta.MajorUnit = 0.1
110 end sub
111 '畫圓餅圖
112 'chart_bgColor_繪圖區加背景色
113 'chartCaption_圖表的標題
114 'chartCaption_fontColor_圖表標題顏色
115 public sub Pie(chart_bgColor_,chartCaption_,chartCaption_fontColor_,Caption_,categories_,values_)
116 o.Clear
117 Set cht = o.Charts.Add
118 Set c = o.Constants
119 cht.Type = c.chChartTypePie3d
120 '給繪圖區加背景色
121 o.Charts(0).PlotArea.Interior.SetSolid chart_bgColor_
122 cht.ExtrudeAngle = 90
123 cht.ChartDepth = 169
124 cht.AspectRatio = 120
125 cht.Rotation =180
126 cht.Inclination=70
127
128 o.HasChartSpaceTitle = True
129 o.ChartSpaceTitle.Caption = chartCaption_
130 o.ChartSpaceTitle.Font.Color = chartCaption_fontColor_
131 o.ChartSpaceTitle.Font.Name = "Arial"
132 o.ChartSpaceTitle.Font.Size = 12
133 o.ChartSpaceTitle.Font.Underline = c.owcUnderlineStyleSingle
134
135 cht.HasLegend = True
136 cht.Legend.Font.Size = 9
137 cht.Legend.Position = c.chLegendPositionBottom
138
139 cht.SetData c.chDimCategories, c.chDataLiteral, categories_
140 cht.SeriesCollection(0).SetData c.chDimValues, c.chDataLiteral, values_
141 set sc=o.Charts(0).SeriesCollection(0)
142 sc.Caption=Caption_
143 Set dl = cht.SeriesCollection(0).DataLabelsCollection.Add
144 dl.Separator = "："
145 dl.HasValue = false
146 dl.HasSeriesName = false
147 dl.HasCategoryName=true
148 dl.HasPercentage = true
149 dl.Font.Size = 9
150 dl.Font.Color = "red"
151 dl.NumberFormat = "00.00%"
152 end sub
153 '拆線圖
154 'chart_bgColor_繪圖區加背景色
155 'chartCaption_圖表的標題
156 'chartCaption_fontColor_圖表標題顏色
157 public sub line(chart_bgColor_,chartCaption_,chartCaption_fontColor_,Caption_,categories_,values_)
158 o.Clear
159 Set cht = o.Charts.Add
160 Set c = o.Constants
161 cht.Type = c.chChartTypeLineMarkers
162 '給繪圖區加背景色
163 o.Charts(0).PlotArea.Interior.SetSolid chart_bgColor_
164 o.HasChartSpaceTitle = True
165 o.ChartSpaceTitle.Caption = chartCaption_
166 o.ChartSpaceTitle.Font.Color = chartCaption_fontColor_
167 o.ChartSpaceTitle.Font.Name = "Arial"
168 o.ChartSpaceTitle.Font.Size = 12
169 o.ChartSpaceTitle.Font.Underline = c.owcUnderlineStyleSingle
170
171 cht.SetData c.chDimCategories, c.chDataLiteral, categories_
172 cht.SeriesCollection(0).SetData c.chDimValues, c.chDataLiteral, values_
173
174 set sc=o.Charts(0).SeriesCollection(0)
175 sc.Caption=Caption_
176 Set dl = cht.SeriesCollection(0).DataLabelsCollection.Add
177 dl.HasValue = True
178 dl.HasPercentage = False
179 dl.Font.Size = 9
180 dl.Font.Color = "red"
181
182 Set categoryAxis = cht.Axes(c.chAxisPositionBottom)
183 categoryAxis.Font.Size = 9
184
185 Set categoryAxis = cht.Axes(c.chAxisPositionLeft)
186 categoryAxis.Font.Size = 9
187 end sub
188 '多系列拆線圖
189 'chart_bgColor_圖表的背景顏色
190 'chartCaption_圖表的標題
191 'chartCaption_fontColor_圖表標題顏色
192 'color_顏色數組
193 'caption_名稱數組
194 'categories_名稱數組
195 'values_值數組
196 public sub serLine(chart_bgColor_,chartCaption_,chartCaption_fontColor_,color_,SeriesNames_,categories_,values_)
197 o.Clear
198 Set cht = o.Charts.Add
199 Set c = o.Constants
200 '設置圖表類型
201 cht.Type = c.chChartTypeLineMarkers
202 '給繪圖區加背景色
203 o.Charts(0).PlotArea.Interior.Color=chart_bgColor_
204 '加上標題
205 o.HasChartSpaceTitle = True
206 o.ChartSpaceTitle.Caption = chartCaption_
207 o.ChartSpaceTitle.Font.Color = chartCaption_fontColor_
208 o.ChartSpaceTitle.Font.Name = "Arial"
209 o.ChartSpaceTitle.Font.Size = 12
210 ''添加數據
211 cht.SetData c.chDimSeriesNames, c.chDataLiteral, SeriesNames_
212 cht.SetData c.chDimCategories, c.chDataLiteral, Categories_
213
214 set categoryAxis = cht.Axes(c.chAxisPositionBottom)
215 categoryAxis.Font.Size = 9
216
217 Set categoryAxis = cht.Axes(c.chAxisPositionLeft)
218 categoryAxis.Font.Size = 9
219
220 for i = 0 to ubound(SeriesNames_)
221 valuetemp = ""
222 for j = i*(ubound(Categories_)+1) to (i+1)*(ubound(Categories_)+1)-1
223 valuetemp = valuetemp & "," & values_(j)
224 next
225 valuearr = split(mid(valuetemp,2),",")
226 cht.SeriesCollection(i).SetData c.chDimValues, c.chDataLiteral, valuearr
227 cht.SeriesCollection(i).Line.Color = color_(i)
228 cht.SeriesCollection(i).Line.Weight = c.owcLineWeightThin
229 cht.SeriesCollection(i).Marker.Style = c.chMarkerStyleDiamond
230 cht.SeriesCollection(i).Interior.Color = color_(i)
231 Set dl = cht.SeriesCollection(i).DataLabelsCollection.Add
232 dl.HasValue = true
233 dl.HasPercentage = false
234 dl.Font.Size = 9
235 dl.font.color="red"
236 next
237 end sub
238 '清除圖型
239 public sub clear()
240 o.Clear
241 end sub
242 end class
1 <html>
2 <head>
3 <title>vbscript owc class test</title>
4 <script language="vbscript" src="owc.vbs"></script>
5 <script language="vbscript">
6 sub window_onload()
7 set t = new owc
8
9 categories =Array("A2-1","A2-2","A2-3","A3-1","A3-2","A3-3"_
10 ,"B2-1","B2-2","B2-3","B3-1","B3-2","B3-3"_
11 ,"C2-1","C2-2","C3-1","C3-2","C3-3")
12 values = Array(0.813,0.689,0.800,0.833,0.681,0.864,0.743_
13 ,0.894,0.822,0.874,0.746,0.908,0.850_
14 ,0.728,0.731,0.734,0.624)
15 set t.set_obj=document.getElementById("cs1")
16 t.bar "#FFFFFF","報表標題","BLUE","#CCCC00","組別",categories,values
17
18 color=Array("#CCFFFF","#99CCFF","#00CCFF","#FF0000","#660066","#FF8080")
19 caption=Array("第1周","第2周","第3周","第4周")
20 categories=Array("A棟","B棟")
21 values=Array(0.6951,0.5798,0.7075,0.512,0.7907,0.7493,0.8691,0.7716)
22 set t.set_obj=document.getElementById("cs2")
23 t.serbar "#FFFFFF","2008年10月坑頭三廠各周各樓層達成率比較圖","red",color,caption,categories,values
24
25 categories=array("臺北","上海")
26 values = array(238760,912560.62)
27 set t.set_obj=document.getElementById("cs3")
28 t.Pie "#FFFFFF","銷售金額所佔比例(城市分類)","BLUE","城市",categories,values
29
30 categories =array("2008/11/1","2008/11/2","2008/11/3","2008/11/4","2008/11/5","2008/11/6","2008/11/7","2008/11/8","2008/11/9","2008/11/10","2008/11/11","2008/11/12","2008/11/13","2008/11/14","2008/11/15","2008/11/16","2008/11/17","2008/11/18","2008/11/19","2008/11/20","2008/11/21","2008/11/22","2008/11/23","2008/11/24","2008/11/25","2008/11/26","2008/11/27","2008/11/28","2008/11/29","2008/11/30")
31 values = array(67239.89,60400.26,7202.89,18453.12,28889.29,102136.25,78826.39,146291.6,93743.29,44204.44,45349.28,50730.6,37900.21,84359.87,169333.62,114594.96,75334.77,51360.32,55853.05,37912.63,45068.22,63930.98,72993.71,18699.5,24714.5,34792.91,39414.58,92171.2,74433.06,3998894.41)
32 set t.set_obj=document.getElementById("cs4")
33 t.line "#FFFFFF","銷售金額","BLUE","日期",categories,values
34
35 color=Array("#CCFFFF","#99CCFF","#00CCFF","#FF0000")
36 SeriesNames = array("A產品","B產品","C產品","D產品")
37 Categories = array("2005/3/24","2005/3/25","2005/3/26","2005/3/27","2005/3/28")
38 values = array(50,100,20,80,89,40,60,20,90,70,20,50,55,25,60,80,20,75,58,100)
39 set t.set_obj=document.getElementById("cs5")
40 t.serline "#FFFFFF","達成率月報表","red",color,SeriesNames,categories,values
41
42 set t=nothing
43 end sub
44 </script>
45 </head>
46 <body>
47 <div id="c1"><object id="cs1" name="cs1" classid="CLSID:0002E55D-0000-0000-C000-000000000046" codebase="owc11.dll" style="width:100%;height:350"></object></div>
48 <div id="c2"><object id="cs2" name="cs2" classid="CLSID:0002E55D-0000-0000-C000-000000000046" codebase="owc11.dll" style="width:100%;height:350"></object></div>
49 <div id="c3"><object id="cs3" name="cs3" classid="CLSID:0002E55D-0000-0000-C000-000000000046" codebase="owc11.dll" style="width:100%;height:350"></object></div>
50 <div id="c4"><object id="cs4" name="cs4" classid="CLSID:0002E55D-0000-0000-C000-000000000046" codebase="owc11.dll" style="width:100%;height:350"></object></div>
51 <div id="c5"><object id="cs5" name="cs5" classid="CLSID:0002E55D-0000-0000-C000-000000000046" codebase="owc11.dll" style="width:100%;height:350"></object></div>
52 </body>
53 </html>
54
![web前端布局練手項目[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)