采用 ajax + vml 制作一个柱状图报表

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

1: servlet：PingServlet.java

package  co.vml.servlet;
import  java.io.IOException;
import  java.io.PrintWriter;

import  javax.servlet.ServletException;
import  javax.servlet.http.HttpServlet;
import  javax.servlet.http.HttpServletRequest;
import  javax.servlet.http.HttpServletResponse;
/** */ /**
 * @version  1.0
 * @author
 */
public   class  PingServlet  extends  HttpServlet
... {
    
 /** *//** Handles the HTTP <code>GET</code> method.
  * @param request servlet request
  * @param response servlet response
  */
 protected void doGet(HttpServletRequest request, HttpServletResponse response)
 throws ServletException, IOException ...{
  String task = request.getParameter("task");
  StringBuffer resBuf = new StringBuffer();
        
  if (task.equals("poll")) ...{        
         for (int i = 0; i < 6; i++)
         ...{
   long counter = Math.round(Math.random()*10) + 1; 
   System.out.println(i + "--" + counter);
   resBuf.append("<percent>" + counter + "</percent>");
         }
   
  }
        
  PrintWriter out = response.getWriter();
  response.setContentType("text/xml");
  response.setHeader("Cache-Control", "no-cache");
  out.println("<response>");
  out.println(resBuf.toString());
  out.println("</response>");
  out.close();
 }
    
 /** *//** Handles the HTTP <code>POST</code> method.
  * @param request servlet request
  * @param response servlet response
  */
 protected void doPost(HttpServletRequest request, HttpServletResponse response)
 throws ServletException, IOException ...{
  doGet(request, response);
 }
    
 /** *//** Returns a short description of the servlet.
  */
 public String getServletInfo() ...{
  return "Short description";
 }
}

2: html页面(ajax + vml)

< HTML  xmlns:v >
< HEAD >
< META  http-equiv ="Content-Type"  content ="text/html; Charset=gb2312" >


< STYLE > ...
td {...}{
 font-size: 12px
}

body {...}{
 font-size: 12px
}

v: *{...}{
 behavior: url(#default#VML);
}

</ STYLE >

</ HEAD >

< script > ...  
var xmlHttp;
function createXMLHttpRequest() 
...{
    if (window.ActiveXObject) 
    ...{
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    } 
    else if (window.XMLHttpRequest) 
    ...{
        xmlHttp = new XMLHttpRequest();                
    }
}

function go() 
...{
  setTimeout("pollServer()", 2000);
}


function pollServer() 
...{
    createXMLHttpRequest();
    var url = "../PingServlet?task=poll";
    xmlHttp.open("GET", url, true);
    xmlHttp.onreadystatechange = pollCallback;
    xmlHttp.send(null);
}
        
        
        
function pollCallback() 
...{
 if (xmlHttp.readyState == 4) 
 ...{
  if (xmlHttp.status == 200) 
  ...{               
   var array1 = new Array(6);
   for(i = 0;i < 6;i++)
   ...{
    array1[i] = parseInt(xmlHttp.responseXML.getElementsByTagName("percent")[i].firstChild.data);
   }
   
   array2=new Array(16,14,10,16,5,8);                
   draw(array1);
   setTimeout("pollServer()", 2000);  
  }
 }
} 
        
              

function draw(array1)
...{
 allstr=array1[0] + array1[1] + array1[2] + array1[3] + array1[4] + array1[5];
 var str = "";
 for(i=0;i<=5;i++)
 ...{ 
  mathstr=Math.round(100/(allstr/array1[i]))
  str = str + "<v:rect fillcolor='lime' style='width:20;color:navy;height:" + 
     5000/(1000/mathstr)+"'><br>&nbsp;%" +
     mathstr + "<br>" + 
     array1[i]+"<v:Extrusion backdepth='15pt' on='true'/></v:rect>";

 } 

 var myDraw = document.getElementById("mydiv");
 myDraw.innerHTML = str;
}


</ script >

< body  bgcolor =eeeeee  style ='border:  0 solid eeeeee' >
< input  id  = "go"  name ="run"  type ="button"  value ="run"  onClick ="go();" >
< div  width ="900"  id  = "mydiv" >
</ div >

</ BODY >
</ HTML >