明輝手游網(wǎng)中心:是一個免費提供流行視頻軟件教程、在線學(xué)習(xí)分享的學(xué)習(xí)平臺!

用ASP制作餅圖、柱狀圖等

[摘要]我們工作中經(jīng)常需要將數(shù)據(jù)轉(zhuǎn)化成柱狀圖,餅圖等,以方便直觀的分析數(shù)據(jù), 這里給大家介紹一個ASP中制作餅圖、柱狀圖的組件:csDrawGraph,csdgt.zip,因為是組件,所以我們在使用之前需要用REGSVR32.EXE 注冊一下,csDrawGraph,可以在ASP中創(chuàng)建餅圖,柱狀圖以及線圖...

我們工作中經(jīng)常需要將數(shù)據(jù)轉(zhuǎn)化成柱狀圖,餅圖等,以方便直觀的分析數(shù)據(jù), 這里給大家介紹一個ASP中制作餅圖、柱狀圖的組件:csDrawGraph,csdgt.zip,因為是組件,所以我們在使用之前需要用REGSVR32.EXE 注冊一下,csDrawGraph,可以在ASP中創(chuàng)建餅圖,柱狀圖以及線圖,其支持的格式有GIF, PNG, JPG and BMP.

看看如下的柱狀圖,餅圖如何生成的例子:

用ASP制作餅圖、柱狀圖等用ASP制作餅圖、柱狀圖等
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
%>


程序很簡單,再些不詳細說明,下面看一個將數(shù)據(jù)庫中的數(shù)據(jù)轉(zhuǎn)換到圖表的例子:

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 %>
<%
  '利用數(shù)據(jù)庫中的數(shù)據(jù)生成線圖。
  '根據(jù)4個不同的值分別生成4條線。
  '在X軸上顯示星期的名稱。

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

  '利用下面的語句創(chuàng)建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

  '關(guān)閉數(shù)據(jù)庫連接
  RS.Close
  DBConn.Close

  '下面設(shè)置組件屬性
  '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
  Chart.PointSize = 3
  Chart.PointStyle = 1

  '最后圖片以GIF格式發(fā)送到瀏覽器
  Response.ContentType = "image/gif"
  Response.BinaryWrite Chart.GIFLine
  Response.End
%>

結(jié)果如圖所示:用ASP制作餅圖、柱狀圖等