采用 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)

js 代码

<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> %" +
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>