備份一個有意思的小東西：動態柱狀圖,採用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>
java 代碼