用ASP製做餅圖、柱狀圖等

最後更新：2017-02-28 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

餅圖|柱狀圖

　　我們工作中經常需要將資料轉化成柱狀圖，餅圖等，以方便直觀的分析資料，這裡給大家介紹一個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">
This simple demonstration shows two graphs using the same data. The first is
a bar chart:
<IMG src="chartimages.asp?Type=Bar" width="400" height="300">

The second is a pie chart. The background colour is set to light
grey to show the overall size of the image.
<IMG src="chartimages.asp?Type=Pie" width="400" height="300">

</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>
Links to the other result pages:
<a href=barsbyday.asp>Bar chart showing all results for any one day</a>.
<a href=barsbycolour.asp>Bar charts showing results for each colour separately</a>.
</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
Chart.PointSize = 3
Chart.PointStyle = 1

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

結果如圖所示：

csDrawGraph的下載地址：http://www.chestysoft.com/download/csdgt.zip

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More