|
导读在 Web 页面中使用图表（chart）表现数据在 Web 编程中经常需要做的一件事情就是把从数据库中查出的数据（数字）使用图表（chart）的形式在页面中表现出来。下面我们简单总结几种常见的做法。... 在 Web 页面中使用图表（chart）表现数据在 Web 编程中经常需要做的一件事情就是把从数据库中查出的数据（数字） 使用图表（chart）的形式在页面中表现出来。下面我们简单总结几种常见的做法。 1. 如果图表的样式只需要柱形图（bar）就可以的话，有一种非常简单，偷懒的 方法，即使用某些 tag 的 width 属性来表现就可以。举例如下： <IMG HEIGHT=5 WIDTH=<%= 数值 %> SRC=http://cfan.net.cn/info/"小方块.gif"> 用这种思路，要是不嫌难看的话，你干脆用 for 循环控制 * 号的显示个数也未尝 不可。;-) 如果想比较美观的话，可以把 CSS 设计的好一些，再和 DHTML 结合。 这种方法的一个完整的例子见： http://www.microsoft.com/workshop/database/datavis/datavis.asp 2. 一些老兄喜欢直接把图片放在数据库中，那我们看看怎么把它们调出来。 （如果这些图片正好是图表的话，我就不算离题。;-)） IIS 的在线帮助中有这么个例子： http://localhost/IIsSamples/SDK/asp/docs/CodeBrws.asp?source=/IIsSamples/SDK/asp/Database/Blob_VBScript.asp 其核心代码： <% ' 声明回传的是 Gif 文件，不是平常的 HTML Response.Buffer = TRUE Response.ContentType = "image/gif" ' 连数据库 Set oConn = Server.CreateObject("ADODB.Connection") oConn.Open "DSN=LocalServer;UID=sa;PWD=;DATABASE=pubs" ' 查出存好的图片 Set oRs = oConn.Execute("SELECT logo FROM pub_info WHERE pub_id='0736'") ' 取值要显得专业些 ;-) PicSize = oRs("logo").ActualSize Pic = oRs("logo").GetChunk(PicSize) ' 再次强调回传的是 gif 图片，view source 是什么都看不到的 Response.BinaryWrite Pic Response.End %> 好，仔细看注释的老兄（我可没这好习惯;-)）会问：这支程序 mypic.asp 在浏览器中最后的效果 相当于 http://host/foo/mypic.gif，我想要有文字怎么办？ 很简单，写个 web page 中间加上 <img src=mypic.asp> 不就完了。 ;-) 3. 还有些老兄更甚，这些大侠的机器多半是 8 CPU 的 P III，他们使用 server-side 软件， 比如 excel，现做一个 chart 图片，然后以 gif 格式传给浏览器。多见于 CGI 高手。;-) 我们来看一个这样的 cool demo。 核心代码： <% Set excel = GetObject("","Excel.Application") If Err.Number <> 0 Then Response.Write("Could not create Excel document. " + Err.Description+"") Err.Clear End If excel.DisplayAlerts = False Set workbooks = excel.Workbooks Set wb = workbooks.Add Set sheets = wb.Sheets Set wsTotal = sheets.Add( ,,,-4167) wsTotal.Name = "Total_Expenses" Set range = wsTotal.Range("B1") range.FormulaR1C1 = "1" Set range = wsTotal.Range("C1") range.FormulaR1C1 = "2" Set range = wsTotal.Range("D1") range.FormulaR1C1 = "3" wsTotal.Activate wsTotal.Select Set range = wsTotal.Range("B1:D1") excel.Charts.Add excel.ActiveChart.ChartType = 51 excel.ActiveChart.SetSourceData range,2 excel.ActiveChart.Export "d:\test\exceltest"+".gif","GIF" Response.Write "<img src=http://cfan.net.cn/info/d:/test/exceltest.gif>" %> 真正的懒人在写这段代码时还利用 excel 的 vba（:-P），绝对代码快枪手， 可是运行效率----呸！;-) 4. 好了，该看一看专业运动员的做法了----使用 chart control。 哪种控件更好大家见仁见智，（比如有些老兄喜欢 Java Applets ;-) 还有些老兄 喜欢自己用 C/C++ 开发）为简化起见，这里我推荐微软（;-)）的---- Office 2000 Web Component。;-) 在前面一文中我介绍过控件与数据结合的几种方式，我们来一一分析 用 Excel 2000 的 chart control 如何实现。 A. 逐行赋值法 Excel 2000 chart control 有两种赋值方法：数组，字符串。 数组法： 代码示例： ---------------------------------- <object id=ChartSpace1 classid=CLSID:0002E500-0000-0000-C000-000000000046 style="width:100%;height:350"></object> <script language=vbs> Sub Window_OnLoad() Dim categories(3), values(3) ' 4 个分类 categories(0) = "White" categories(1) = "Black" categories(2) = "Asian" categories(3) = "Latino" ' 准备活动 ;-) ChartSpace1.Clear ChartSpace1.Charts.Add Set c = ChartSpace1.Constants ' 添加三个系列的值 ChartSpace1.Charts(0).SeriesCollection.Add ChartSpace1.Charts(0).SeriesCollection.Add ChartSpace1.Charts(0).SeriesCollection.Add ' 锦上添花 ;-) ChartSpace1.Charts(0).SeriesCollection(0).Caption = "Perot" ' 设置 ChartSpace1.Charts(0).SeriesCollection(0).SetData c.chDimCategories, c.chDataLiteral, categories values(0) = 0.2 ' The White value. values(1) = 0.06 ' The Black value. values(2) = 0.17 ' The Asian value. values(3) = 0.13 ' The Latino value. ChartSpace1.Charts(0).SeriesCollection(0).Caption = "Perot" ChartSpace1.Charts(0).SeriesCollection(0).SetData c.chDimCategories, c.chDataLiteral, categories ChartSpace1.Charts(0).SeriesCollection(0).SetData c.chDimValues, c.chDataLiteral, values ' Series two contains election data for Clinton. ' Update the values array, then set the chart data. values(0) = 0.38 ' The White value. values(1) = 0.82 ' The Black value. values(2) = 0.28 ' The Asian value. values(3) = 0.62 ' The Latino value. ChartSpace1.Charts(0).SeriesCollection(1).Caption = "Clinton" ChartSpace1.Charts(0).SeriesCollection(1).SetData c.chDimCategories, c.chDataLiteral, categories ChartSpace1.Charts(0).SeriesCollection(1).SetData c.chDimValues, c.chDataLiteral, values ' Series two contains election data for Bush. ' Update the values array, and then set the chart data. values(0) = 0.42 ' The White value. values(1) = 0.12 ' The Black value. values(2) = 0.55 ' The Asian value. values(3) = 0.25 ' The Latino value. ChartSpace1.Charts(0).SeriesCollection(2).Caption = "Bush" ChartSpace1.Charts(0).SeriesCollection(2).SetData c.chDimCategories, c.chDataLiteral, categories ChartSpace1.Charts(0).SeriesCollection(2).SetData c.chDimValues, c.chDataLiteral, values ' Make the chart legend visible, format the left value axis as percentage, ' and specify that value gridlines are at 10% intervals. ChartSpace1.Charts(0).HasLegend = True ChartSpace1.Charts(0).Axes(c.chAxisPositionLeft).NumberFormat = "0%" ChartSpace1.Charts(0).Axes(c.chAxisPositionLeft).MajorUnit = 0.1 End Sub </script> 字符串法： 代码示例： -------------------------- <script language=vbs> Sub Window_OnLoad() Dim categories, values ' 原来的注释很无聊，被我删掉了 ;-) ChartSpace1.Clear ChartSpace1.Charts.Add Set c = ChartSpace1.Constants ' 以 tab 为分隔符的字符串拼凑 categories = "White" & Chr(9) & "Black" & Chr(9) & "Asian" & Chr(9) & "Latino" ' Add three series to the chart. ChartSpace1.Charts(0).SeriesCollection.Add ChartSpace1.Charts(0).SeriesCollection.Add ChartSpace1.Charts(0).SeriesCollection.Add ' Series one contains election data for Perot. ' Set the series caption (the text that appears in the legend). ChartSpace1.Charts(0).SeriesCollection(0).Caption = "Perot" ' Set the categories for the first series (this collection is zero-based). ChartSpace1.Charts(0).SeriesCollection(0).SetData c.chDimCategories, c.chDataLiteral, categories ' 以 tab 为分隔符的字符串拼凑 values = "0.2" & Chr(9) & "0.06" & Chr(9) & "0.17" & Chr(9) & "0.13" ChartSpace1.Charts(0).SeriesCollection(0).SetData c.chDimValues, c.chDataLiteral, values ' Series two contains election data for Clinton. ' Update the values string, and then set the chart data. values = "0.38" & Chr(9) & "0.82" & Chr(9) & "0.28" & Chr(9) & "0.62" ChartSpace1.Charts(0).SeriesCollection(1).Caption = "Clinton" ChartSpace1.Charts(0).SeriesCollection(1).SetData c.chDimCategories, c.chDataLiteral, categories ChartSpace1.Charts(0).SeriesCollection(1).SetData c.chDimValues, c.chDataLiteral, values ' Series two contains election data for Bush. ' Update the values string, and then set the chart data. values = "0.42" & Chr(9) & "0.12" & Chr(9) & "0.55" & Chr(9) & "0.25" ChartSpace1.Charts(0).SeriesCollection(2).Caption = "Bush" ChartSpace1.Charts(0).SeriesCollection(2).SetData c.chDimCategories, c.chDataLiteral, categories ChartSpace1.Charts(0).SeriesCollection(2).SetData c.chDimValues, c.chDataLiteral, values ' Make the chart legend visible, format the left value axis as percentage, ' and specify that value gridlines are at 10% intervals. ChartSpace1.Charts(0).HasLegend = True ChartSpace1.Charts(0).Axes(c.chAxisPositionLeft).NumberFormat = "0%" ChartSpace1.Charts(0).Axes(c.chAxisPositionLeft).MajorUnit = 0.1 End Sub </script> ------------------------- 无论是数组法还是字符串法，你都可以在 client-side 逐行插入 <%=value%>。 对于字符串法，你也可以在 server-side 就拼好一个字串，然后直接传过来。 ChartSpace1.Charts(0).SeriesCollection(1).SetData c.chDimValues, c.chDataLiteral, <% =stringValues%> （好象要加引号哦。"<% =stringValues%>"，意思到了就中） B. client-side recordset 法 Excel 2000 chart 这么 cool 的 control 当然支持直接的 recordset 绑定。 代码示例： ------------------------- <html> <body> 第一步：创建 Chart 和 ADO Connection object <object id=ChartSpace1 classid=CLSID:0002E500-0000-0000-C000-000000000046 style="width:100%;height:480"></object> <object id=ADOConnection1 classid=CLSID:00000514-0000-0010-8000-00AA006D2EA4></object> <script language=vbs> Sub Window_OnLoad() Dim rs, Categories, Values ' 找个英文 Access 97 里的 nwind.mdb 试试 Categories = "" Values = "" ADOConnection1.Open "DRIVER={Microsoft Access Driver (*.mdb)};DBQ=c:\nwind.mdb" Set rs = ADOConnection1.Execute("SELECT * FROM [Category Sales for 1995]") rs.MoveFirst While Not rs.EOF Categories = Categories & rs.Fields(0).Value & Chr(9) Values = Values & rs.Fields(1).Value & Chr(9) rs.MoveNext Wend rs.Close ADOConnection1.Close ' 多拼了个 TAB，去了它 Categories = Left(Categories, Len(Categories) - 1) Values = Left(Values, Len(Values) - 1) ' 很容易看懂吧 ChartSpace1.Clear ChartSpace1.Charts.Add ChartSpace1.Charts(0).SeriesCollection.Add ChartSpace1.Charts(0).SeriesCollection(0).Caption = "Sales" ChartSpace1.Charts(0).SeriesCollection(0).SetData ChartSpace1.Constants.chDimCategories, ChartSpace1.Constants.chDataLiteral, Categories ChartSpace1.Charts(0).SeriesCollection(0).SetData ChartSpace1.Constants.chDimValues, ChartSpace1.Constants.chDataLiteral, Values '-- As a final step, we turn this into a bar chart (instead of a column chart), and '-- format the axis as US $. ChartSpace1.Charts(0).Type = ChartSpace1.Constants.chChartTypeBarClustered ChartSpace1.Charts(0).Axes(ChartSpace1.Constants.chAxisPositionBottom).NumberFormat = "$#,##0" End Sub </script> </body> </html> ----------------------------------- C. 目前 Excel 2000 的 chart control 还没有用于 VI6 的 Design Time Control 版，恨恨！ |
温馨提示：喜欢本站的话，请收藏一下本站！
本站发布的Win7纯净版系统、Win10纯净版和XP纯净版系统仅为个人学习测试使用，请在下载后24小时内删除，不得用于任何商业用途，否则后果自负，请支持购买微软正版软件！
本站所有资源全部来自于网络资源,如侵犯到您的权益,请及时通知我们(peng896066052@126.com),我们会及时处理.
Copyright © 2018-2020 雨林木风下载站
