Vector Markup Language(VML)是一種XML語言，用於繪製向量圖形(vector graphics)。
雖然這裡是用VML去產生統計圖，但我個人覺得實用性並不是這麼大，
因為它僅適用在IE上，FireFox與Chrome都無法使用，所以僅僅拿來參考用。
<%
'參數含義(座標值陣列，橫坐標，縱坐標，圖表的寬度，圖表的高度,圖表標題，X軸單位，Y軸單位)
FUNCTION table1(stat_array,table_left,table_top,all_width,all_height,table_title,X_unit,Y_unit)
dim bg_color(10)
bg_color(1)="#ff1919" '線條顏色設定
bg_color(2)="#ffff19" '線條顏色設定
bg_color(3)="#1919ff" '線條顏色設定
bg_color(4)="#19ff19" '線條顏色設定
bg_color(5)="#fc0" '線條顏色設定
bg_color(6)="#3cc" '線條顏色設定
bg_color(7)="#ff19ff" '線條顏色設定
bg_color(8)="#993300" '線條顏色設定
bg_color(9)="#f60" '線條顏色設定
bg_color(10)="#ff8c19" '線條顏色設定
IF X_unit <> "" THEN X_unit = X_unit 'X軸單位
IF Y_unit <> "" THEN Y_unit = Y_unit 'Y軸單位
num1 = UBOUND(stat_array,1) 'stat_array(x,1)中的x值，亦即代表會有幾條線，stat_array(0,1)代表X軸的項目標題
line_temp=SPLIT(stat_array(0,1),",") '取得X座標項目標題
num2 = UBOUND(line_temp,1)+1 '取得X座標項目標題會有幾個
DIM line_code
REDIM line_code(num1,num2)
FOR j=1 TO num2
line_code(0,j) = line_temp(j-1) '取得X座標項目標題
NEXT
value_Max=0
FOR i=1 TO num1
line_temp = split(stat_array(i,1),",")
line_code(i,0) = stat_array(i,2)
FOR j=1 TO num2
line_code(i,j) = CDbl(line_temp(j-1)) '取得每一條線的Y座標值
IF value_Max<line_code(i,j) THEN value_Max=line_code(i,j) '取得所有值當中的最大值
NEXT
NEXT
value_Max = CInt(value_Max)
value_Max_str =CStr(value_Max)
'取進位後的值，結果即是Y座標項目的最大值
IF value_Max>9 THEN
temp=MID(value_Max_str,2,1) '取最大值的第二位數
IF temp>4 THEN
temp2=(int(value_Max/(10^(len(value_Max_str)-1)))+1)*10^(len(value_Max_str)-1)
ELSE
temp2=(int(value_Max/(10^(len(value_Max_str)-1)))+0.5)*10^(len(value_Max_str)-1)
END IF
ELSE
IF value_Max>4 THEN temp2=10 ELSE temp2=5
END IF
item_hight = temp2/5 'Y座標項目每個值的間隔
item_width = 20000/(num2-1)
Response.Write "<v:rect id='background' style='position:absolute;left:"&table_left&"px;top:"&table_top&"px;WIDTH:"&all_width&"px;HEIGHT:"&all_height&"px;' fillcolor='#EFEFEF' strokecolor='gray'>"
Response.Write " <v:shadow on='t' type='single' color='silver' offset='4pt,4pt'/>"
Response.Write "</v:rect>"
Response.Write "<v:group ID='table' style='position:absolute;left:"&table_left&"px;top:"&table_top&"px;WIDTH:"&all_width&"px;HEIGHT:"&all_height&"px;' coordsize = '27500,12800'>"
Response.Write " <v:Rect style='position:relative;left:1500;top:200;width:23000;height:800'filled='false' stroked='f'>"
Response.Write " <v:TextBox inset='0pt,0pt,0pt,0pt'>"
Response.Write " <table width='100%' border='0' align='center' cellspacing='0'>"
Response.Write " <tr>"
Response.Write " <td align='center' valign='middle'><div style='font-size:15pt; font-family:黑體;'><B>"&table_title&"</B></div></td>"
Response.Write " </tr>"
Response.Write " </table>"
Response.Write " </v:TextBox>"
Response.Write " </v:Rect> "
Response.Write " <v:rect id='back' style='position:relative;left:1700;top:1200;width:20500; height:10500;' fillcolor='#9cf' strokecolor='#DFDFDF'>"
Response.Write " <v:fill rotate='t' angle='-45' focus='100%' type='gradient'/>"
Response.Write " </v:rect>"
Response.Write " <v:rect id='back2' style='position:relative;left:23000;top:1200;width:4000; height:"&(10500)&";' fillcolor='#9cf' stroked='t' strokecolor='#0099ff'>"
Response.Write " <v:fill rotate='t' angle='-175' focus='100%' type='gradient'/>"
Response.Write " <v:shadow on='t' type='single' color='silver' offset='3pt,3pt'/>"
Response.Write " </v:rect>"
FOR i=1 TO num1
IF i=1 THEN
displaystr=""
ELSE
displaystr="none"
END IF
Response.Write " <div style='cursor:hand;' onmouseover='moveon(rec"&i&",line_"&i&")' onmouseout='moveout(rec"&i&",line_"&i&","&i&")' onclick='clickit("&i&")'>"
Response.Write " <v:Rect id='rec"&i&"' style='position:relative;left:23100;top:"&(i-1)*10200/10+1450&";width:3800;height:800;display:"&displaystr&";' fillcolor='#efefef' strokecolor='"&bg_color(i)&"'>"
Response.Write " <v:fill opacity='.6' color2='fill darken(118)' o:opacity2='.6' rotate='t' method='linear sigma' focus='100%' type='gradient'/>"
Response.Write " </v:Rect>"
Response.Write " <v:Rect style='position:relative;left:23200;top:"&(i-1)*10200/10+1500&";width:600;height:700' fillcolor='"&bg_color(i)&"' stroked='f'/>"
Response.Write " <v:Rect style='position:relative;left:24000;top:"&(i-1)*10200/10+1500&";width:3400;height:700' filled='f' stroked='f'>"
Response.Write " <v:TextBox inset='0pt,4pt,0pt,0pt' style='font-size:9pt;'><div align='left'>"&stat_array(i,2)&"</div></v:TextBox>"
Response.Write " </v:Rect> "
Response.Write " </div> "
NEXT
Response.Write " <v:line ID='X' from='1700,11700' to='22700,11700' style='z-index:2' strokecolor='#000000' strokeWeight=1pt><v:stroke EndArrow='Classic'/></v:line>"
Response.Write " <v:line ID='Y' from='1700,900' to='1700,11700' style='z-index:2' strokecolor='#000000' strokeWeight=1pt><v:stroke StartArrow='Classic'/></v:line>"
Response.Write " <v:Rect style='position:relative;left:100;top:700;width:1500;height:500' filled='false' stroked='false'>"
Response.Write " <v:TextBox inset='0pt,0pt,0pt,0pt' style='font-size:9pt;'><div align='right'>"&Y_unit&"</div></v:TextBox>"
Response.Write " </v:Rect> "
Response.Write " <v:Rect style='position:relative;left:22200;top:11900;width:2000;height:500' filled='false' stroked='false'>"
Response.Write " <v:TextBox inset='0pt,0pt,0pt,0pt' style='font-size:9pt;'><div align='left'>"&X_unit&"</div></v:TextBox>"
Response.Write " </v:Rect> "
FOR i=0 TO 4
Response.Write " <v:line from='1300,"&i*2000+1700&"' to='1700,"&i*2000+1700&"' style='z-index:2' strokecolor='#000000'></v:line>"
Response.Write " <v:line from='1700,"&i*2000+1700&"' to='2200,"&i*2000+1200&"' style='z-index:2' strokecolor='#0099FF'></v:line>"
Response.Write " <v:line from='2200,"&i*2000+1200&"' to='22200,"&i*2000+1200&"' style='z-index:2' strokecolor='#0099FF'></v:line>"
Response.Write " <v:line from='2200,"&i*2000+2200&"' to='22200,"&i*2000+2200&"' style='z-index:2' strokecolor='#0099FF'>"
Response.Write " <v:stroke dashstyle='Dot'/>"
Response.Write " </v:line>"
Response.Write " <v:Rect style='position:relative;left:100;top:"&i*2000+1250&";width:1500;height:500' filled='false' stroked='false'>"
Response.Write " <v:TextBox inset='0pt,0pt,0pt,0pt' style='font-size:9pt;'><div align='right'>"&item_hight*(5-i)&"</div></v:TextBox>"
Response.Write " </v:Rect> "
NEXT
Response.Write " <v:line from='2200,11200' to='22200,11200' style='z-index:2' strokecolor='#0099FF'></v:line>"
Response.Write " <v:line from='2200,1200' to='2200,11200' style='z-index:2' strokecolor='#0099FF'></v:line>"
Response.Write " <v:line from='1700,11700' to='2200,11200' style='z-index:2' strokecolor='#0099FF'></v:line>"
FOR j=0 TO num2-1
Response.Write " <v:line from='"&j*item_width+1700&",11700' to='"&j*item_width+1700&",12000' style='z-index:2' strokecolor='#000000'></v:line>"
Response.Write " <v:line from='"&j*item_width+1700&",11700' to='"&j*item_width+2200&",11200' style='z-index:2' strokecolor='#0099FF'><v:stroke dashstyle='ShortDot'/></v:line>"
Response.Write " <v:line from='"&j*item_width+2200&",1200' to='"&j*item_width+2200&",11200' style='z-index:2' strokecolor='#0099FF'><v:stroke dashstyle='ShortDot'/></v:line>"
Response.Write " <v:Rect style='position:relative;left:"&j*item_width+1700-item_width/2&";top:12100;width:"&item_width&";height:500' filled='false' stroked='false'>"
Response.Write " <v:TextBox inset='0pt,0pt,0pt,0pt' style='font-size:9pt;'><div align='center'>"&line_code(0,j+1)&"</div></v:TextBox>"
Response.Write " </v:Rect> "
NEXT
FOR i=1 TO num1
IF i=1 THEN
displaystr=""
ELSE
displaystr="none"
END IF
Response.Write " <div id='line_"&i&"' style='display:"&displaystr&";'>"
FOR j=0 TO num2-2
this_hight1 = cint(line_code(i,j+1)/(5*item_hight)*10000)
this_hight2 = cint(line_code(i,j+2)/(5*item_hight)*10000)
'線條樣式
Response.Write " <v:line from='"&j*item_width+1850&","&(10000-this_hight1+1550)&"' to='"&(j+1)*item_width+1850&","&(10000-this_hight2+1550)&"'style='z-index:"&i*10&";' strokeweight='0.1pt' strokecolor='"&bg_color(i)&"'>"
Response.Write " <o:extrusion v:ext='view' backdepth='2pt' on='t' lightposition='-50000,-50000' lightposition2='50000'/>"
Response.Write " </v:line>"
NEXT
Response.Write " </div>"
NEXT
Response.Write "</v:group>"
END FUNCTION
%>
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<title></title>
<STYLE>
v\:* { Behavior: url(#default#VML) }
o\:* { behavior: url(#default#VML) }
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
var showit = new Array(10);
function moveon(iteam,lineit) {
temp=eval(iteam)
templine=eval(lineit)
if (showit[1]) {
rec1.style.display = "";
line_1.style.display = "";
}
else {
rec1.style.display = "none";
line_1.style.display = "none";
}
temp.style.display = "";
templine.style.display = "";
}
function moveout(iteam,lineit,i) {
temp=eval(iteam)
templine=eval(lineit)
if (showit[i]) {
temp.style.display = "";
templine.style.display = "";
}
else {
temp.style.display = "none";
templine.style.display = "none";
}
}
function clickit(i) {
if (showit[i]) {
showit[i]=false
}
else {
showit[i]=true
}
}
-->
</script>
</head>
<body>
<%
DIM total(10,2)
total(0,1)="1月,2月,3月,4月,5月,6月,7月,8月,9月,10月,11月,12月,13月"
total(1,1)="200,158,982,0,369,100,595,895,652,25,245,951,99"
total(2,1)="1984,58,495,36,158,486,952,258,653,415,485,14,99"
total(3,1)="850,988,958,145,369,745,265,158,856,145,425,352,99"
total(4,1)="600,525,235,485,258,265,158,365,35,148,658,475,99"
total(5,1)="62,525,635,215,0,465,258,305,66,547,54,148,99"
total(6,1)="560,625,645,329,158,665,358,95,120,358,42,253,99"
total(7,1)="950,725,635,435,258,865,458,955,152,845,425,421,99"
total(8,1)="600,825,155,455,458,265,558,365,352,245,853,122,99"
total(9,1)="360,925,215,545,658,465,658,845,400,421,541,125,99"
total(10,1)="50,225,355,655,858,665,758,35,584,214,54,651,99"
total(1,2)="項目1"
total(2,2)="項目2"
total(3,2)="項目3"
total(4,2)="項目4"
total(5,2)="項目5"
total(6,2)="項目6"
total(7,2)="項目7"
total(8,2)="項目8"
total(9,2)="項目9"
total(10,2)="項目10"
'參數含義(陣列，橫坐標，縱坐標，圖表的寬度，圖表的高度,圖表標題，X軸單位，Y軸單位)
call table1(total,20,20,700,350,"曲 線 統 計 圖","時間","元")
%>
</body>
</html>
