OpenFlashChartDemo动态数据显示
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><html><script type="text/javascript" src="<%=request.getContextPath() %>/ofc2/swfobject.js"></script><script type="text/javascript" src="<%=request.getContextPath() %>/ofc2/json2.js"></script><body> <div id="div1"></div> <p><input type="button" value="重新加载" onclick="reload1()" > </p> <div id="div2" ></div></body></html><script type="text/javascript" language="javascript">//定义第一个Flash控件swfobject.embedSWF("<%=request.getContextPath() %>/ofc2/open-flash-chart.swf", "div1", "50%", "280","9.0.0", "expressInstall.swf", {"data-file" : "<%=request.getContextPath() %>/servlet/GlassChartServlet"}, {wmode : "transparent"});//定义第二个Flash控件swfobject.embedSWF("<%=request.getContextPath() %>/ofc2/open-flash-chart.swf", "div2", "50%", "280","9.0.0", "expressInstall.swf", {"data-file" : "<%=request.getContextPath() %>/servlet/GlassChartServlet"}, {wmode : "transparent"});//根据请求一个URL，重新加载第一个Flash控件的数据function reload1(){ tmp = findSWF("div1"); x = tmp.reload( "<%=request.getContextPath() %>/servlet/GlassChartServlet" ); }//第二个Flash控件,直接加载JSON数据function reload2(){ tmp = findSWF("div2"); x = tmp.load( JSON.stringify(getNewData()) );}//生成一个JSON数据对象function getNewData(){ var arraylist=[ parseInt(100*Math.random()), parseInt(100*Math.random()), parseInt(100*Math.random()), parseInt(100*Math.random()), parseInt(100*Math.random()), parseInt(100*Math.random()), parseInt(100*Math.random()), parseInt(100*Math.random()), parseInt(100*Math.random()), parseInt(100*Math.random()), parseInt(100*Math.random()), parseInt(100*Math.random()) ]; var data = {"title":{"text":"Sales by Month 2007","style":"font-size: 14px; font-family: Verdana; text-align: center;"}, "x_axis":{"labels":{"labels":["J","F","M","A","M","J","J","A","S","O","N",{"text":"Dec", "colour":"#000000", "size":10, "rotate":45}]}},"y_axis":{"steps":16, "max":160},"bg_colour":"#ffffff", "elements":[{"type":"bar_glass", "tip":"$#val#", "values":arraylist, "colour":"#00aa00"}]}return data;}//定时器,自动重新加载数据setInterval(reload2,"1000");//查找SWF控件function findSWF(movieName) { if (navigator.appName.indexOf("Microsoft")!= -1) { return window[movieName]; } else { return document[movieName]; }}</script> ?
package com.flashchart;import java.io.IOException;import java.io.PrintWriter;import java.util.LinkedHashMap;import java.util.Map;import java.util.Map.Entry;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import jofc2.model.Chart;import jofc2.model.Text;import jofc2.model.axis.XAxis;import jofc2.model.axis.YAxis;import jofc2.model.elements.BarChart;import jofc2.model.elements.BarChart.Bar;public class GlassChartServlet extends HttpServlet {protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("application/json"); response.setHeader("Cache-Control", "no-cache"); response.setCharacterEncoding("UTF-8"); PrintWriter out = response.getWriter(); Map<String, Long> dataMap = new LinkedHashMap<String, Long>(); String[] month={"一月","二月","三月","四月","五月","六月","七月","八月"}; for(int i=0;i<8;i++) { dataMap.put(month[i],Math.round(Math.random()*710)); } Chart ofc2Chart = new Chart(); Text title = new Text("2010年度XXXXX业务办理量"); ofc2Chart.setTitle(title); BarChart barChart = new BarChart(BarChart.Style.GLASS); // 设置条状图样式 XAxis x = new XAxis(); // X 轴 for (Entry<String, Long> entry : dataMap.entrySet()) { x.addLabels(entry.getKey()); // x 轴的文字 Bar bar = new Bar(entry.getValue(),"起 "); bar.setColour("0x336699"); // 颜色 bar.setTooltip(entry.getValue() + "起 "); // 鼠标移动上去后的提示 barChart.addBars(bar); } ofc2Chart.addElements(barChart); ofc2Chart.setXAxis(x); double ymax = 720d; // Y 轴最大值 YAxis y = new YAxis(); // y 轴 y.setMax(ymax + 1.0); // y 轴最大值 y.setSteps(ymax / 10); // y 轴步进 ofc2Chart.setYAxis(y); String jsonChart = ofc2Chart.toString(); out.write(jsonChart); out.flush(); out.close();} }?
?
function reload(){ tmp = findSWF("chart"); // // reload the data: // x = tmp.reload(); // // to load from a specific URL: // you may need to 'escape' (URL escape, i.e. percent escape) your URL if it has & in it // x = tmp.reload("gallery-data-32.php?beer=1"); // // do NOT show the 'loading...' message: // x = tmp.reload("gallery-data-32.php?beer=1", false);}function findSWF(movieName) { if (navigator.appName.indexOf("Microsoft")!= -1) { return window["ie_" + movieName]; } else { return document[movieName]; }}?
?按照官方资料，我在设置第二个参数时，它就报错，这里先记下了，有待解决？
? // do NOT show the 'loading...' message:
? x = tmp.reload( "<%=request.getContextPath() %>/servlet/GlassChartServlet",false );
?
?
??上一张效果图，如下：
?
x = tmp.reload 已经不需要带false参数了。 2 楼 forneverkk 2011-08-06 你好博主，这个例子我已近实验过了，可以用，但是没有动画效果啊，
我看到这个网站上www.ofc2dz.com上给的页面展示中，柱状图初始的时候，会自动上涨，
这个效果怎么实现的啊？急求，偶qq 342401526 3 楼 leifeng2 2011-08-21 不好意思，很久没来了。
说明：上面的例子当时是在IE下测试的，没有问题。
如果没有动画效果，主要看看下面这段代码是否执行：
//定时器,自动重新加载数据
setInterval(reload2,"1000");
这是让第二个图表数据每秒钟刷新一次，因为加载的都是随机数，所以每次数据不同，看到的图表会不一样。
关键点：定时器是否执行、随机数是否生成。