2007-05-17

采用 ajax + vml 生成柱状图报表

关键字: B/S实时报表生成技术

备份一个有意思的小东西：动态柱状图,采用ajax + vml。
vml是微软在IE5中就支持的矢量图技术。采用xml的格式来生成矢量图，这为我们在页面上生成高质量的图像提供了
很好的支持。另：虽然SVG很好，但IE不支持（不安装插件的话）。
程序很简单：
一个servlet：采集数据（仅仅随机产生一个数组）。
一个html页面：采用ajax从servlet得到数据，然后用vml生成图表。由于采用了ajax，页面是不刷新的实时得到数据。

1: servlet：PingServlet.java

  1. package co.vml.servlet;   
  2. import java.io.IOException;   
  3. import java.io.PrintWriter;   
  4.   
  5. import javax.servlet.ServletException;   
  6. import javax.servlet.http.HttpServlet;   
  7. import javax.servlet.http.HttpServletRequest;   
  8. import javax.servlet.http.HttpServletResponse;   
  9. /**  
  10.  * @version  1.0  
  11.  * @author  
  12.  */  
  13. public class PingServlet extends HttpServlet   
  14. {   
  15.        
  16.  /** Handles the HTTP <code>GET</code> method.  
  17.   * @param request servlet request  
  18.   * @param response servlet response  
  19.   */  
  20.  protected void doGet(HttpServletRequest request, HttpServletResponse response)   
  21.  throws ServletException, IOException {   
  22.   String task = request.getParameter("task");   
  23.   StringBuffer resBuf = new StringBuffer();   
  24.            
  25.   if (task.equals("poll")) {           
  26.          for (int i = 0; i < 6; i++)   
  27.          {   
  28.    long counter = Math.round(Math.random()*10) + 1;    
  29.    System.out.println(i + "--" + counter);   
  30.    resBuf.append("<percent>" + counter + "</percent>");   
  31.          }   
  32.       
  33.   }   
  34.            
  35.   PrintWriter out = response.getWriter();   
  36.   response.setContentType("text/xml");   
  37.   response.setHeader("Cache-Control", "no-cache");   
  38.   out.println("<response>");   
  39.   out.println(resBuf.toString());   
  40.   out.println("</response>");   
  41.   out.close();   
  42.  }   
  43.        
  44.  /** Handles the HTTP <code>POST</code> method.  
  45.   * @param request servlet request  
  46.   * @param response servlet response  
  47.   */  
  48.  protected void doPost(HttpServletRequest request, HttpServletResponse response)   
  49.  throws ServletException, IOException {   
  50.   doGet(request, response);   
  51.  }   
  52.        
  53.  /** Returns a short description of the servlet.  
  54.   */  
  55.  public String getServletInfo() {   
  56.   return "Short description";   
  57.  }   
  58. }   
  59.   

2: html页面(ajax + vml)

js 代码
  1. <HTML xmlns:v>   
  2. <HEAD>   
  3. <META http-equiv="Content-Type" content="text/html; Charset=gb2312">   
  4.   
  5.   
  6. <STYLE>   
  7. td {   
  8.  font-size: 12px   
  9. }   
  10.   
  11. body {   
  12.  font-size: 12px   
  13. }   
  14.   
  15. v\: *{   
  16.  behavior: url(#default#VML);   
  17. }   
  18.   
  19. </STYLE>   
  20.   
  21. </HEAD>   
  22.   
  23. <script>    
  24. var xmlHttp;   
  25. function createXMLHttpRequest()    
  26. {   
  27.     if (window.ActiveXObject)    
  28.     {   
  29.         xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");   
  30.     }    
  31.     else if (window.XMLHttpRequest)    
  32.     {   
  33.         xmlHttp = new XMLHttpRequest();                   
  34.     }   
  35. }   
  36.   
  37. function go()    
  38. {   
  39.   setTimeout("pollServer()", 2000);   
  40. }   
  41.   
  42.   
  43. function pollServer()    
  44. {   
  45.     createXMLHttpRequest();   
  46.     var url = "../PingServlet?task=poll";   
  47.     xmlHttp.open("GET", url, true);   
  48.     xmlHttp.onreadystatechange = pollCallback;   
  49.     xmlHttp.send(null);   
  50. }   
  51.            
  52.            
  53.            
  54. function pollCallback()    
  55. {   
  56.  if (xmlHttp.readyState == 4)    
  57.  {   
  58.   if (xmlHttp.status == 200)    
  59.   {                  
  60.    var array1 = new Array(6);   
  61.    for(i = 0;i < 6;i++)   
  62.    {   
  63.     array1[i] = parseInt(xmlHttp.responseXML.getElementsByTagName("percent")[i].firstChild.data);   
  64.    }   
  65.       
  66.    array2=new Array(16,14,10,16,5,8);                   
  67.    draw(array1);   
  68.    setTimeout("pollServer()", 2000);     
  69.   }   
  70.  }   
  71. }    
  72.            
  73.                  
  74.   
  75. function draw(array1)   
  76. {   
  77.  allstr=array1[0] + array1[1] + array1[2] + array1[3] + array1[4] + array1[5];   
  78.  var str = "";   
  79.  for(i=0;i<=5;i++)   
  80.  {    
  81.   mathstr=Math.round(100/(allstr/array1[i]))   
  82.   str = str + "<v:rect fillcolor='lime' style='width:20;color:navy;height:" +    
  83.      5000/(1000/mathstr)+"'><br>&nbsp;%" +   
  84.      mathstr + "<br>" +    
  85.      array1[i]+"<v:Extrusion backdepth='15pt' on='true'/></v:rect>";   
  86.   
  87.  }    
  88.   
  89.  var myDraw = document.getElementById("mydiv");   
  90.  myDraw.innerHTML = str;   
  91. }   
  92.   
  93.   
  94. </script>   
  95.   
  96. <body bgcolor=eeeeee style='border: 0 solid eeeeee'>   
  97. <input id = "go" name="run" type="button" value="run" onClick="go();">   
  98. <div width="900" id = "mydiv">   
  99. </div>   
  100.   
  101. </BODY>   
  102. </HTML>   

 

 

java 代码
评论
vkuang 2007-06-01
楼主，能不能把你的代码传上来啊，这个里面的代码好像部分被编辑器过滤掉了
lcllcl987
搜索本博客
博客分类
最近加入圈子
存档
最新评论