ASP柱状图

时间：2008-07-15 15:37:30 来源：作者：

<%
'参数含义(数组，横坐标，纵坐标，图表的宽度，图表的高度,图表标题，X轴单位，Y轴单位)
function table1(stat_array,table_left,table_top,all_width,all_height,table_title,X_unit,Y_unit)
dim bg_color(9)
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"

if X_unit<>"" then
X_unit=X_unit
end if
if Y_unit<>"" then
Y_unit=Y_unit
end if

num =ubound(stat_array,1)
item_width = cint(20000/num+0.5)
begin_x= cint((item_width-1200)/2)+2200

value_Max=0
for i=1 to num
if value_Max<stat_array(i,1) then value_Max=stat_array(i,1)
next
value_Max = cint(value_Max)
value_Max_str =cstr(value_Max)
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

response.Write "<v:shapetype id='Box' coordsize='21600,21600' o:spt='16' adj='5400'></v:shapetype>"

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 = '23500,12700'>"

response.Write " <v:Rect style='position:relative;left:1500;top:200;width:20000;height:800'filled='false' stroked='false'>"
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: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:11700;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='1200,"&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 i=1 to num
this_hight = cint(stat_array(i,1)/(5*item_hight)*10000+420)
response.Write " <v:shape id='Box"&i&"' type='#Box' fillcolor='"&bg_color(i)&"' strokecolor='#5f5f5f' style='position:relative; left:"&(i-1)*item_width+begin_x&";top:"&cint(10000-this_hight+1620)&";width:1200;height:"&this_hight&";z-index:10'>"
response.Write " <v:fill o:opacity2='52429f' rotate='t' angle='-45' focus='100%' type='gradient'/>"
response.Write " </v:shape>"

response.Write " <v:Rect style='position:relative;left:"&(i-1)*item_width+2200&";top:"&cint(10000-this_hight+1150)&";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'>"&stat_array(i,1)&"</div></v:TextBox>"
response.Write " </v:Rect> "

response.Write " <v:Rect style='position:relative;left:"&(i-1)*item_width+2200&";top:11850;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'>"&stat_array(i,2)&"</div></v:TextBox>"
response.Write " </v:Rect> "
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>
</head>
<body>
<a href="a.asp">柱状统计图</a>
<a href="b.asp">曲线统计图</a>
<a href="c.asp">三维饼状图</a>
<%
dim total(9,2)

total(1,1)=200
total(2,1)=800
total(3,1)=1004
total(4,1)=600
total(5,1)=1222
total(6,1)=2100
total(7,1)=80
total(8,1)=1002
total(9,1)=5000

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)="KFC"

call table1(total,240,200,700,400,"柱状统计图KFC","","年")
%>
</body>
</html>

我们工作中经常需要将数据转化成柱状图，饼图等，以方便直观的分析数据，这里给大家介绍一个ASP中制作饼图、柱状图的组件：csDrawGraph，csdgt.zip,因为是组件，所以我们在使用之前需要用REGSVR32.EXE 注册一下，csDrawGraph，可以在ASP中创建饼图，柱状图以及线图，其支持的格式有GIF, PNG, JPG and BMP.

看看如下的柱状图，饼图如何生成的例子：

chartdemo.asp

<%@ language=vbscript %>
<html>
<head>
<title>csDrawGraph Demonstration</title>
</head>
<body bgcolor="#FFFFFF">
<P>This simple demonstration shows two graphs using the same data. The first is
a bar chart:</P>
<P align="center"><IMG src="chartimages.asp?Type=Bar" width="400" height="300">
</P>
<P align="left">The second is a pie chart. The background colour is set to light
grey to show the overall size of the image.</P>
<P align="center"><IMG src="chartimages.asp?Type=Pie" width="400" height="300">
</P>
</body>
</html>

chartimages.asp

<%@ language=vbscript %>

<%
Response.Expires = 0
Response.Buffer = true
Response.Clear
Response.ContentType = "Image/Gif"

Set Chart = Server.CreateObject("csDrawGraphTrial.Draw")

Chart.AddData "NO> 1", 17, "ff0000"
Chart.AddData "NO> 2", 28, "00ff00"
Chart.AddData "NO> 3", 5, "0000ff"

If Request.QueryString("Type") = "Pie" Then
    Chart.Title = "Sample Pie Chart"
    Chart.BGColor = "eeeeee"
    Chart.LabelBGColor = "eeeeee"
    Chart.TitleBGColor = "eeeeee"
    Response.BinaryWrite Chart.GifPie
Else
    Chart.Title = "Sample Bar Chart"
    Response.BinaryWrite Chart.GifBar
End If

Response.End
%>

程序很简单，再些不详细说明，下面看一个将数据库中的数据转换到图表的例子：

lines.asp:

<html>
<head>
<title>Line graph showing all the results</title>

</head>

<body>
<table align=center width=400>
<tr><td colspan=4><img src="gif_lines.asp" width=400 height=300></td></tr>
</table>
<p>Links to the other result pages:</p>
<p><a href=barsbyday.asp>Bar chart showing all results for any one day</a>.</p>
<p><a href=barsbycolour.asp>Bar charts showing results for each colour separately</a>.</p>
</body>
</html>

gif_lines.asp:

<%@ language=vbscript %>
<%
'利用数据库中的数据生成线图。
'根据4个不同的值分别生成4条线。
'在X轴上显示星期的名称。

Response.Expires = 0
Response.Buffer = true
Response.Clear

'利用下面的语句创建chart对象，版本不同会有所差异。
'Set Chart = Server.CreateObject("csDrawGraph.Draw")
Set Chart = Server.CreateObject("csDrawGraphTrial.Draw")

ConnectionString = "PROVIDER=MICROSOFT.JET.OLEDB.4.0;DATA SOURCE=" & _
Server.Mappath("data.mdb")
Set DBConn = Server.CreateObject("ADODB.Connection")
DBConn.Open ConnectionString
Set RS = Server.CreateObject("ADODB.Recordset")
SQL = "SELECT * FROM Table1 ORDER BY Day"
RS.Open SQL, DBConn

    While Not RS.Eof
      Chart.AddPoint CInt(RS("Day")), CInt(RS("Red")), "ff0000", "Red"
      Chart.AddPoint CInt(RS("Day")), CInt(RS("Blue")), "0000ff", "Blue"
      Chart.AddPoint CInt(RS("Day")), CInt(RS("Green")), "00ff00", "Green"
      Chart.AddPoint CInt(RS("Day")), CInt(RS("Yellow")), "ffff00", "Yellow"
      Chart.AddXValue CInt(RS("Day")), RS("DayName")
      RS.MoveNext
    Wend

'关闭数据库连接
RS.Close
DBConn.Close

'下面设置组件属性
'X轴坐标从1开始而不是0。(XOffset = 1)

Chart.Title = "All the combined results"
Chart.TitleX = 100
Chart.YAxisText = "Total for each day"
Chart.OriginY = 220
Chart.XOffset = 1
Chart.XTop = 7
Chart.XGrad = 1
Chart.UseXAxisLabels = true
Chart.LineWidth = 2
ChartPointSize = 3
Chart.PointStyle = 1

'最后图片以GIF格式发送到浏览器
Response.ContentType = "image/gif"
Response.BinaryWrite Chart.GIFLine
Response.End
%>

结果如图所示：

来顶一下

返回首页

推荐资讯

网络视频女性用户比例	拓展阅读：改变全球互
消息称雅虎和谷歌或于	成功的站长应是全才

相关文章

无相关信息

栏目更新

栏目热门