- 浏览: 916889 次
- 性别:
- 来自: 上海
文章分类
- 全部博客 (263)
- J2EE (9)
- Spring (11)
- Hibernate (11)
- Struts (5)
- opensource (19)
- Hadoop (28)
- 架构设计 (8)
- 企业应用 (10)
- SNMP (8)
- SSO (4)
- webservice (11)
- RPC (2)
- 编程语言 (0)
- Java (30)
- Javascript (5)
- NoSQL (11)
- 数据库 (0)
- oracle (8)
- MySQL (3)
- web (1)
- Android (2)
- Linux (15)
- 软件工具 (15)
- 项目构建 (11)
- 测试工具 (2)
- Exception (19)
- 杂谈 (4)
- Groovy (5)
- Nodejs (1)
- MacOSX (4)
最新评论
-
fighhin:
decode(BinaryBitmap,java.util.M ...
条形码/二维码之开源利器ZXing图文介绍 -
u013489005:
追问:楼主,请问有中文文档么?我的邮箱是frankgray@s ...
Java表达式计算引擎:Expr4J -
u013489005:
感谢博主 需要引入的包是import java.io.*;im ...
Java表达式计算引擎:Expr4J -
calosteward:
感谢楼主分享。。 Zxing 我听说过的。__________ ...
条形码/二维码之开源利器ZXing图文介绍 -
u013810758:
judasqiqi 写道感谢楼主!想请问楼主一下这个生成的图片 ...
Java实现二维码QRCode的编码和解码
blog迁移至:http://www.micmiu.com
很久前写过一篇Open Flash Chart2初步应用,刚接触的可以看看这篇文章。
最近为了实现动态曲线图展示的功能,对Open Flash Chart2又小小研究了下,研究和整合过程中遇到的各种各样的问题,现在对重点问题的解决方法在此总结下,方便自己日后回顾,也希望能给有同样需求的同仁们提供帮助。
本文的重点就是解决OFC2和第三方JS的冲突,基本目录结构:
[一]、Open Flash Chart2中javascript基本方法的介绍
[二]、OFC2与Prototype.js的冲突解决
[三]、OFC2与Ext.Viewport的冲突解决
[四]、动态流量曲线图的demo
ps:
1.本文demo是在tomcat下发布后测试的,涉及的到部分html页面是不能脱离Web应用服务器的
2.demo中的有关js、swf的路径请根据自己项目的路径具体情况调整
【一】OFC2的javascript基本方法
open_flash_chart_data() 将画图的数据以string的方式传递给chart
ofc_ready() 数据加载好后会执行这个函数的
具体的作用及执行顺序可以试着运行下面这个demo页面:ofc2ChartDemoJs.html
运行结果示例图:
OFC2提供function load()方法,可以更新chart的数据,接下来的动态曲线图,也是基于这个方法来实现的,我们先看一个简单的ofc2ChartDemoLoad.jsp
运行结果示例图:
【二】、OFC2与prototype.js冲突问题
在我实验的过程中发现,如果只是第一次加载flash,运用函数swfobject.embedSWF(),设置参数"data-file"加载后台json数据时,flash能正常画出曲线图和prototype、jquery没有冲突,IE、FF都能正常显示。但是如果需要调用上面介绍的 load(JSON.stringify(data))这个方法重新画图时会失败,具体现象:在IE下chart不会更新数据,在FF下chart会消失。最后发现JSON.stringify(data) 和prototype.js中的JSON转化为string的方法冲突引起的(prototype1.6.0.3和1.6.1都有冲突),最开始是怀疑json2.js和prototype.js的JSON.stringify(data)转化后的格式不一致引起的,在接下来的测试和调试中发现转化后的格式的确不一致,但这个发现不是问题的根源,最后找了一个折中的方法解决了这个问题:
【三】OFC2与Ext.Viewport的冲突问题
如果你的页面里用到了Ext.Viewport来布局,会发现在IE下findSWF('ofc2_id').load(Object.toJSON(chartdata));再一次的发生了杯具,FF下一切正常,而在IE下页面会有js错误提示:“未指明的错误”,这个错误的原因至今没有找到,js debug以及后来查了很多资料也没有确切结果,最后在ext的论坛上找了一个有关该问题的讨论,提供了一个扩展js库uxmedia,可以解决该问题,
相关讨论的帖子:http://www.sencha.com/forum/showthread.php?23983-ux.Media-.Flash-Flex-Components-2.1.2
uxmedia的官网:http://code.google.com/p/uxmedia/
uxmedia API doc:http://uxdocs.theactivegroup.com/
基本的解决方法:
页面代码片段:
效果图如下:
【四】动态曲线的简单demo代码
实时流量动态图的效果如上,基本实现的代码如下,demo是个随机数模拟流量的(有关snmp采集端口流量的代码就不在这里贴出了 ):
FlowChart2Vo .java
DrawOfc2RealTimeDemoAction.java
-----------------------------------分 ------------------------------------隔 ------------------------------------线 --------------------------------------
很久前写过一篇Open Flash Chart2初步应用,刚接触的可以看看这篇文章。
最近为了实现动态曲线图展示的功能,对Open Flash Chart2又小小研究了下,研究和整合过程中遇到的各种各样的问题,现在对重点问题的解决方法在此总结下,方便自己日后回顾,也希望能给有同样需求的同仁们提供帮助。
本文的重点就是解决OFC2和第三方JS的冲突,基本目录结构:
[一]、Open Flash Chart2中javascript基本方法的介绍
[二]、OFC2与Prototype.js的冲突解决
[三]、OFC2与Ext.Viewport的冲突解决
[四]、动态流量曲线图的demo
ps:
1.本文demo是在tomcat下发布后测试的,涉及的到部分html页面是不能脱离Web应用服务器的
2.demo中的有关js、swf的路径请根据自己项目的路径具体情况调整
【一】OFC2的javascript基本方法
open_flash_chart_data() 将画图的数据以string的方式传递给chart
ofc_ready() 数据加载好后会执行这个函数的
具体的作用及执行顺序可以试着运行下面这个demo页面:ofc2ChartDemoJs.html
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Open Flash Chart 2 demo</title> <script type="text/javascript" src="../json2.js"></script> <script type="text/javascript" src="../swfobject.js"></script> </head> <body> <p>Hello World ofc2</p> <div id="my_ofc2_chart"></div> </body> <script type="text/javascript"> var ofc2_chart_id="my_ofc2_chart"; /* swfobject.embedSWF("../open-flash-chart.swf", ofc2_chart_id, "400", "300", "9.0.0", "expressInstall.swf", {"get-data":"getDemoInitData"}, {"wmode":"transparent"} ); */ //如果定义了function:open_flash_chart_data(),则不需要:"get-data":"getDemoInitData"; swfobject.embedSWF("../open-flash-chart.swf", ofc2_chart_id, "400", "300", "9.0.0", "expressInstall.swf", {"wmode":"transparent"} ); function ofc_ready() { alert('ofc_ready'); } function open_flash_chart_data() { alert( 'reading data' ); return JSON.stringify(data_1); } function findSWF(movieName) { if (navigator.appName.indexOf("Microsoft")!= -1) { return window[movieName]; } else { return document[movieName]; } } var data_1 = { "elements": [ { "type": "bar", "values": [9,8,7,6,5,4,3,2,1 ] } ], "title": { "text": "demo 1" } }; function getDemoInitData(){ return JSON.stringify(data_1); } </script> </html>
运行结果示例图:
OFC2提供function load()方法,可以更新chart的数据,接下来的动态曲线图,也是基于这个方法来实现的,我们先看一个简单的ofc2ChartDemoLoad.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"%> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Open Flash Chart 2 demo</title> <script type="text/javascript" src="../json2.js"></script> <script type="text/javascript" src="../swfobject.js"></script> </head> <body> <p>Hello World ofc2</p> <div id="my_ofc2_chart"></div> <br> <a href="javascript:load_data1('my_ofc2_chart')">display data 1</a> || <a href="javascript:load_data2('my_ofc2_chart')">display data 2</a> </body> <script type="text/javascript"> var ofc2_chart_id="my_ofc2_chart"; swfobject.embedSWF("../open-flash-chart.swf", ofc2_chart_id, "400", "300", "9.0.0", "expressInstall.swf", {"get-data":"getDemoInitData"}, {"wmode":"transparent"} ); function findSWF(movieName) { if (navigator.appName.indexOf("Microsoft")!= -1) { return window[movieName]; } else { return document[movieName]; } } var data_0 = { "elements": [ { "type": "bar", "values": [1,2,3,4,5,6,7,8,9] } ], "title": { "text": "demo" } }; var data_1 = { "elements": [ { "type": "bar", "values": [9,8,7,6,5,4,3,2,1] } ], "title": { "text": "demo data 1" } }; var data_2={ "title":{ "text":"每周水果产量" }, "elements":[ { "type":"bar_glass", "values":[16,8,18,12,16,24,6] } ], "x_axis":{ "labels":{ "labels":["星期1","星期2","星期3","星期4","星期5","星期6","星期日"] } }, "y_axis":{ "max":30 } }; function getDemoInitData(){ return JSON.stringify(data_0); } function load_data1(movieName) { var tmp = findSWF(movieName); tmp.load(JSON.stringify(data_1)); } function load_data2(movieName) { var tmp = findSWF(movieName); tmp.load(JSON.stringify(data_2)); } </script></html>
运行结果示例图:
【二】、OFC2与prototype.js冲突问题
在我实验的过程中发现,如果只是第一次加载flash,运用函数swfobject.embedSWF(),设置参数"data-file"加载后台json数据时,flash能正常画出曲线图和prototype、jquery没有冲突,IE、FF都能正常显示。但是如果需要调用上面介绍的 load(JSON.stringify(data))这个方法重新画图时会失败,具体现象:在IE下chart不会更新数据,在FF下chart会消失。最后发现JSON.stringify(data) 和prototype.js中的JSON转化为string的方法冲突引起的(prototype1.6.0.3和1.6.1都有冲突),最开始是怀疑json2.js和prototype.js的JSON.stringify(data)转化后的格式不一致引起的,在接下来的测试和调试中发现转化后的格式的确不一致,但这个发现不是问题的根源,最后找了一个折中的方法解决了这个问题:
- 先把json2.js这个文件从页面中里移除
- 然后load(JSON.stringify(chartdata))改成load(Object.toJSON(chartdata))
<%@ page language="java" contentType="text/html; charset=UTF-8"%> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Open Flash Chart 2 demo</title> <script type="text/javascript" src="../../scripts/prototype-1.6.0.2.js"></script> <script type="text/javascript" src="../swfobject.js"></script> </head> <body> <p>Hello World ofc2</p> <div id="my_ofc2_chart"></div> <br> <input type="button" name="btn" value="stop" onclick="changeRefresh(this)"> </body> <script type="text/javascript"> var portType = "random"; var portId = "1000"; var portIndex = "5"; var ofc2_chart_id="my_ofc2_chart"; var ofc2_url = 'DrawOfc2RealTimeAction.do'; var flash_param="ofc2_param="+ofc2_chart_id+","+portType+","+portId+","+portIndex; swfobject.embedSWF("../open-flash-chart.swf", ofc2_chart_id, "600", "300", "9.0.0", "expressInstall.swf", {"data-file":ofc2_url+"?"+flash_param}, {"wmode":"transparent"} ); //refresh_ofc2_chart(); var o_time = setInterval('refresh_ofc2_chart()', 10*1000); function changeRefresh(obj){ if(obj.value=="stop"){ if(null!=o_time){clearInterval(o_time );} obj.value="start" }else{ clearInterval(o_time ); o_time = setInterval('refresh_ofc2_chart()', 10*1000); obj.value="stop" } } function refresh_ofc2_chart(){ //var pars = Object.toQueryString(par); var myAjax = new Ajax.Request(ofc2_url, { encoding :'UTF-8', method :'get', parameters :flash_param, asynchronous :false, onComplete : showResponse } ); } function showResponse(rep) { var chartdata = rep.responseText.evalJSON(true); //alert(JSON.stringify(chartdata)); var tmp = findSWF(ofc2_chart_id); x = tmp.load(Object.toJSON(chartdata)); } function findSWF(movieName) { if (navigator.appName.indexOf("Microsoft")!= -1) { return window[movieName]; } else { return document[movieName]; } } </script></html>
【三】OFC2与Ext.Viewport的冲突问题
如果你的页面里用到了Ext.Viewport来布局,会发现在IE下findSWF('ofc2_id').load(Object.toJSON(chartdata));再一次的发生了杯具,FF下一切正常,而在IE下页面会有js错误提示:“未指明的错误”,这个错误的原因至今没有找到,js debug以及后来查了很多资料也没有确切结果,最后在ext的论坛上找了一个有关该问题的讨论,提供了一个扩展js库uxmedia,可以解决该问题,
相关讨论的帖子:http://www.sencha.com/forum/showthread.php?23983-ux.Media-.Flash-Flex-Components-2.1.2
uxmedia的官网:http://code.google.com/p/uxmedia/
uxmedia API doc:http://uxdocs.theactivegroup.com/
基本的解决方法:
- 导入uxmedia的相关js文件要注意文件的先后顺序
- 用Ext.ux.Chart.OFC.Component创建flash chart
- 修改更新数据的相关方法:把findSWF(ofc2_chart_id).load(JSON.stringify(chartdata))改成: Ext.getDom(ofc2_chart_id).load(Object.toJSON(chartdata));//prototype.js
Ext.getDom(ofc2_chart_id).load(JSON.stringify(chartdata));//json2.js
页面代码片段:
<%@ page language="java" contentType="text/html; charset=UTF-8"%> <%@ include file="/common/taglibs.jsp"%> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Open Flash Chart 2 demo</title> <!-- 其他有关Extjs的相关文件自己导入,这里省略--> <script type="text/javascript" src="ofc2/swfobject.js"></script> <!-- 注意下面uxmedia的相关文件的顺序--> <script type="text/javascript" src="scripts/ext/ux.media/uxvismode.js"></script> <script type="text/javascript" src="scripts/ext/ux.media/uxmedia.js"></script> <script type="text/javascript" src="scripts/ext/ux.media/uxmedia-ie.js"></script> <script type="text/javascript" src="scripts/ext/ux.media/uxflash.js"></script> <script type="text/javascript" src="scripts/ext/ux.media/uxchart.js"></script> <script type="text/javascript" src="scripts/ext/ux.media/uxofc.js"></script> </head> <body> <p>Hello World ofc2</p> <div id="div_panel_t"></div> <div id="div_panel_w"></div> <div id="div_panel_c"> <div align="center" id="div_iframe"> <div id="div_my_ofc2_chart"></div> <div id="my_ofc2_chart"></div> <br> <div style="text-align: center; font-size: 9pt"><input type="button" name="btn_control" onclick="changeBtnStatus(this)" value="暂停"></div> </div> </div> </body> <script type="text/javascript"> var portType = "random"; var portId = "1000"; var portIndex = "5"; var refresh_Interval=10; var ofc2_chart_id="my_ofc2_chart"; var ofc2_url = '/DrawOfc2RealTimeAction.do'; var flash_param="ofc2_param="+ofc2_chart_id+","+portType+","+portId+","+portIndex; var obj_refresh = setInterval('refresh_ofc2_chart()', refresh_Interval*1000); function findSWF(movieName) { if (navigator.appName.indexOf("Microsoft")!= -1) { return window[movieName]; } else { return document[movieName]; } } function refresh_ofc2_chart(){ var myAjax = new Ajax.Request(ofc2_url, { encoding :'UTF-8', method :'get', parameters :flash_param, asynchronous :false, onComplete : showResponse }); } function showResponse(rep) { var chartdata = rep.responseText.evalJSON(true); //var tmp = findSWF(ofc2_chart_id); //tmp.load(JSON.stringify(chartdata)) var tmp = Ext.getDom(ofc2_chart_id); tmp.load(Object.toJSON(chartdata)); } function changeBtnStatus(o_btn){ if(null!=obj_refresh){clearInterval(obj_refresh );} if("继续"==o_btn.value){ obj_refresh = setInterval('refresh_ofc2_chart()', refresh_Interval*1000); o_btn.value="暂停"; }else{ o_btn.value="继续"; } } function createExtOFC2Comp(_ofc2_id){ var _ux_OFC_Comp = new Ext.ux.Chart.OFC.Component({ height : 300, width : 500, renderTo: 'div_'+_ofc2_id, chartCfg:{ id : _ofc2_id, autoSize : true, renderOnResize : false, disableCaching : true } //,mediaMask : {msg:'Loading OpenChart Object'} ,loadMask : {msg:'Gathering Chart Data'} ,autoMask : true ,id :'demoOFC' ,chartURL : 'ofc2/open-flash-chart.swf' /* Chart data loading options */ //,chartData : data //initial load - pre-defined JSON series ,dataURL : ofc2_url+'?'+flash_param // SWF-Managed remote request in JSON format ,previews : new Array() }); return _ux_OFC_Comp; } Ext.onReady(function() { var west_panel = new Ext.Panel( { region : 'west', id: "sidebar", split : true, width : 180, minSize : 100, maxSize : 200, title : " ", items : [], autoScroll : true, collapsible : true, frame : true }); var _ofc2_comp = createExtOFC2Comp(ofc2_chart_id); //_ofc2_comp.show(); var viewport = new Ext.Viewport( { id : 'hxlayout', layout : 'border', layoutConfig : { animate : true }, defaults : { border : false, split : false }, items : [ { region : 'north', id : 'cmp_panel_t', contentEl : 'div_panel_t', height : 40 },west_panel,{ region : 'center', id : 'top_cmp_panel_c', contentEl : 'div_panel_c', autoScroll : true, items:[_ofc2_comp] } ] }); }); </script> </html>
效果图如下:
【四】动态曲线的简单demo代码
实时流量动态图的效果如上,基本实现的代码如下,demo是个随机数模拟流量的(有关snmp采集端口流量的代码就不在这里贴出了 ):
FlowChart2Vo .java
/** * @author michael * */ public class FlowChart2Vo implements Serializable { /** * serialVersionUID */ private static final long serialVersionUID = -8305542118777147896L; private String dataKey; private String chartId; private double outLastValue; private double inLastValue; private long outLastTime; private long inLastTime; private int maxDataCount = 10; private Double ymax = 1d; private CommunityTarget target = null; private String portIndex; private List<String> xlabelList = new ArrayList<String>(); private List<Double> inFlowList = new ArrayList<Double>(); private List<Double> outFlowList = new ArrayList<Double>(); /** * @param inFlow * @param outFlow * @param xlabel */ public void addFlowData(Double inFlow, Double outFlow, String xlabel) { if (this.inFlowList.size() > this.maxDataCount) { this.inFlowList.remove(0); this.outFlowList.remove(0); this.xlabelList.remove(0); } this.inFlowList.add(inFlow); this.outFlowList.add(outFlow); this.xlabelList.add(xlabel); } /** * @return */ public Double getMaxOutFlow() { List<Double> temp = new ArrayList<Double>(); for (Double dou : outFlowList) { if (null != dou && !Double.isNaN(dou)) { temp.add(dou); } } Collections.sort(temp); if (temp.size() < 1) { return 0d; } return temp.get(temp.size() - 1); } /** * @return */ public Double getMaxInFlow() { List<Double> temp = new ArrayList<Double>(); for (Double dou : inFlowList) { if (null != dou && !Double.isNaN(dou)) { temp.add(dou); } } Collections.sort(temp); if (temp.size() < 1) { return 0d; } return temp.get(temp.size() - 1); } //get set方法省略 //.........
DrawOfc2RealTimeDemoAction.java
package michael.ofc2.action; import java.io.PrintWriter; import java.text.SimpleDateFormat; import java.util.Date; import java.util.HashMap; import java.util.List; import java.util.Locale; import java.util.Map; 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.LineChart; import jofc2.model.elements.LineChart.Dot; import michael.ofc2.vo.FlowChart2Vo; import org.apache.commons.lang.StringUtils; import org.apache.struts.action.Action; import org.apache.struts.action.ActionForm; import org.apache.struts.action.ActionForward; import org.apache.struts.action.ActionMapping; import org.snmp4j.CommunityTarget; /** * Open flash chart 2 * @author Michael sun */ public class DrawOfc2RealTimeDemoAction extends Action { /** * draw chart * @param mapping struts mapping * @param form struts form * @param request http request * @param response http response * @return action forward * @throws Exception any execption */ @SuppressWarnings("unchecked") public ActionForward execute(ActionMapping mapping, ActionForm form, HttpServletRequest request, HttpServletResponse response) throws Exception { response.setContentType("application/json"); response.setHeader("Cache-Control", "no-cache"); response.setCharacterEncoding("UTF-8"); PrintWriter out = response.getWriter(); String ofc2_param = request.getParameter("ofc2_param"); String[] params = ofc2_param.split(","); String chartId = params[0];// request.getParameter("ofcChartId"); String flashType = params[1]; String equId = params[2];// request.getParameter("equId"); String portIndex = params[3];// request.getParameter("portIndex"); String maxDataCount = null; if (params.length > 4) { maxDataCount = params[4];// request.getParameter("maxDataCount"); } String dataKey = equId + "-" + portIndex; Map<String, FlowChart2Vo> rtdataMap = (Map<String, FlowChart2Vo>) request .getSession().getAttribute("SE_FLOW_RTDATA_MAP"); if (null == rtdataMap) { rtdataMap = new HashMap<String, FlowChart2Vo>(); } FlowChart2Vo rtDatavo = rtdataMap.get(dataKey); if (null == rtDatavo) { rtDatavo = new FlowChart2Vo(); rtDatavo.setDataKey(dataKey); rtDatavo.setChartId(chartId); rtDatavo.setPortIndex(portIndex); CommunityTarget target = null; rtDatavo.setTarget(target); } if (null != maxDataCount && !"".equals(maxDataCount)) { rtDatavo.setMaxDataCount(Integer.parseInt(maxDataCount)); } if ("random".equals(flashType)) { this.getRandomData(rtDatavo); } else if (StringUtils.isNotEmpty(rtDatavo.getPortIndex())) { this.getSnmpFlowData(rtDatavo); } rtdataMap.put(dataKey, rtDatavo); request.getSession().setAttribute("SE_FLOW_RTDATA_MAP", rtdataMap); String chartString = this.createLineChart(rtDatavo); System.out.println(chartString); out.write(chartString); out.close(); return null; } /** * 随机数 * @param rtDatavo */ private void getRandomData(FlowChart2Vo rtDatavo) { String xlabel = getFormatDate(new Date(), "mm:ss"); double inSpeed = 2 + Math.random() * 3; double outSpeed = 1 + Math.random() * 3; rtDatavo.addFlowData(inSpeed, outSpeed, xlabel); } /** * snmp 采集端口的出入速率 * @param rtDatavo */ private void getSnmpFlowData(FlowChart2Vo rtDatavo) { // ...... } /** * 生成ofc2的json格式数据 * @param rtDatavo * @return */ private String createLineChart(FlowChart2Vo rtDatavo) { Chart ofc2Chart = new Chart(); Text title = new Text("demo"); ofc2Chart.setTitle(title); ofc2Chart.setXLegend(new Text("time", "{color: #736AFF;}")); ofc2Chart.setYLegend(new Text("Flow(Mb/s)", "{color: #736AFF;}")); LineChart lineChartIn = new LineChart(); lineChartIn.setColour("#00FF00"); lineChartIn.setText("in"); LineChart lineChartOut = new LineChart(); lineChartOut.setColour("#0000FF"); lineChartOut.setText("out"); List<Double> inFlowList = rtDatavo.getInFlowList(); List<Double> outFlowList = rtDatavo.getOutFlowList(); List<String> xlabelList = rtDatavo.getXlabelList(); if (inFlowList.size() > 0 && outFlowList.size() > 0) { double tmpymax = Math.max(rtDatavo.getMaxInFlow(), rtDatavo .getMaxOutFlow()); if (tmpymax > rtDatavo.getYmax()) { rtDatavo.setYmax(tmpymax); } } double ymax = rtDatavo.getYmax(); YAxis y = new YAxis(); // y 轴 y.setMax(ymax); // y 轴最大值 y.setSteps(ymax / 10); // y 轴步进 XAxis xaxis = new XAxis(); // X 轴 for (int i = 0; i < inFlowList.size(); i++) { xaxis.addLabels(xlabelList.get(i)); Dot indot = new Dot(inFlowList.get(i)); indot.setDotSize(2); indot.setHaloSize(2); lineChartIn.addDots(indot); Dot dot2 = new Dot(outFlowList.get(i)); dot2.setDotSize(2); dot2.setHaloSize(2); lineChartOut.addDots(dot2); } ofc2Chart.addElements(lineChartIn); ofc2Chart.addElements(lineChartOut); ofc2Chart.setXAxis(xaxis); ofc2Chart.setYAxis(y); return ofc2Chart.toString(); } /** * 将日期(Date形式)按格式转化成日期(String形式). * @param date 日期(Date形式) * @param formatStr 日期格式 * @return dateStr 日期(String形式) */ public static String getFormatDate(Date date, String formatStr) { String dateStr = ""; SimpleDateFormat sdf = new SimpleDateFormat(formatStr, Locale.UK); dateStr = sdf.format(date); return dateStr; } }
-----------------------------------分 ------------------------------------隔 ------------------------------------线 --------------------------------------
评论
4 楼
lichaobao
2013-07-29
求发份完整的例子给我!谢谢!邮箱328155699@qq.com
3 楼
wanluoliang
2011-12-26
可以借鉴。。。。。。。
2 楼
pttaag
2011-12-12
x轴上有中文字的话,好像倾斜不了。网上有说替换open-flash-chart.swf文件的方法,我试过了,没效果。请问如何解决。
1 楼
caimukun0318
2011-11-15
收藏啦 好东西 谢谢
发表评论
-
github更新自己Fork的代码
2014-03-09 22:52 1186github上有个功能叫fork,可以将别人的工程复制 ... -
Eclipse+OpenORB+ORBStudio配置CORBA开发环境
2013-10-24 09:04 1711目录 准备工作 整合配置 [一]、准备工作 -
openfire数据库配置说明
2013-04-26 11:29 1695数据库配置是在 conf/openfire.xml ... -
Shiro在web应用中实现验证码功能
2013-04-09 11:44 2962目录结构: 概述 扩展shiro认证 验证码工具 ... -
Openfire插件开发坏境配置指南
2013-03-19 14:24 963本文主要是介绍Openfire插件开发的环境配置,该指南是在 ... -
Openfire源码导入Eclipse编译配置指南
2013-03-19 09:26 3549本文将图文介绍如何把openfire(以3.8.1为例)源码 ... -
Openfire服务端安装和配置
2013-03-19 09:24 1086图文详细介绍Openfire服务端安装和配置的过程 ... -
iText实现直接把URL网页内容生成PDF
2012-11-28 10:44 3391目录: 概述 软件要求 实现过程 ... -
iText XML Worker实现HTML转PDF
2012-11-27 09:47 1850目录: 概述 两种应用场景的实现 ... -
iText XML Worker修改源码完美支持HTML中文字符转PDF
2012-11-27 08:59 2394目录: 介绍 中文字符转换 转换 ... -
iText生成PDF的书签
2012-11-26 13:46 2036主要演示iText生成PDF的书签功能,基本介绍详见代码中的注 ... -
iText生成PDF入门
2012-11-26 09:30 1125目录: 介绍 实验环境 入门 ... -
jldap实现Java对LDAP的基本操作
2012-07-03 15:17 2296目录: 概述 基本操作 查询 添加 删除 ... -
dom4j使用小结(基础入门级)
2011-11-08 15:11 2569blog迁移至 :http://www.micmiu. ... -
Simple XML
2011-09-28 23:55 5112blog迁移至 :http://www.micmiu. ... -
HttpClient、HTMLParser解决Google搜索结果的页面无法解析问题
2010-11-04 09:20 4568blog迁移至:http://www.micmiu.c ... -
HTMLParser初试
2010-11-03 09:22 1939blog迁移至:http://www.micmiu.c ... -
Open Flash Chart2应用(实现flash另存为图片)
2010-04-22 08:43 8653blog迁移至:http://www.micmiu.c ...
相关推荐
这个教程可能是为了帮助用户理解如何利用Open Flash Chart来创建动态和定制化的图表,适合Web开发者或者数据分析人员学习。下面我们将深入探讨Open Flash Chart的相关知识点。 1. **Open Flash Chart的基本概念** ...
在实际应用中,Open Flash Chart 2 允许开发者通过JSON格式的数据动态生成图表,这使得它能方便地与服务器端数据源结合,实现动态更新和交互功能。此外,Open Flash Chart 2 还支持自定义图表组件,如图例、工具提示...
Java Open Flash Chart 2(简称jOFC2)是一个基于Java的开源库,用于生成高质量的Flash图表,包括曲线图。这个库允许开发者在Java应用中轻松地创建动态、交互式的图表,为数据可视化提供了便利。在Java项目中集成...
- **多样化图表类型**:Open Flash Chart支持多种图表类型,如柱状图、折线图、饼图、散点图、雷达图等,满足不同场景的数据展示需求。 - **自定义元素**:开发者可以自由定制图表的各个部分,包括颜色、样式、标签...
Open Flash Chart 2是一款强大的开源图表库,它允许开发者创建各种动态、美观的图表,包括饼图、曲线图和柱状图等。这个实例集合提供了一系列的示例代码,帮助我们理解和应用Open Flash Chart 2的功能。下面我们将...
Open Flash Chart是一款强大的开源Flash图表库,用于在Web应用程序中创建高质量、互动的图表。它提供了丰富的自定义选项,能够生成各种类型的图表,包括柱状图、饼图、线点图等,使得数据可视化变得更加简单易行。在...
3. **图表类型**:Open Flash Chart支持多种图表类型,包括折线图、柱状图、饼图、面积图、散点图、甘特图等。这些图表适用于展示各种类型的数据,如趋势分析、比较、分布等。 4. **数据源**:Open Flash Chart可以...
2. **丰富的图表类型**:Open Flash Chart支持多种图表类型,如折线图、柱状图、饼图、散点图、面积图、甘特图等,能满足各种数据分析和展示的需求。 3. **高度可定制**:开发者可以通过调整各种参数来改变图表的...
- **选择图表类型**:Open Flash Chart 2 支持多种图表类型,如柱状图、饼图、线图、面积图、散点图等。根据数据特性选择合适的图表类型。 - **设置图表属性**:包括背景色、边框、标题、图例、坐标轴等。大部分...
由于最近公司项目中要用到图表,看到Open Flash Chart这个还不错,开源的,而且官方还附带了很多Demo,最重要的是支持很多的语言,只是这个东西一直很久没有更新,在网上找了很多资料,找到了Open Flash Chart社区...
Open Flash Chart 2(简称OFC2)是一款强大的开源图表生成库,专为创建交互式、动态的Flash图表而设计。它允许开发者通过JSON格式的数据来构建各种类型的图表,如折线图、柱状图、饼图等,广泛应用于数据分析、报表...
Open Flash Chart(简称OFC),是一个开源的flash报表组件。我们不仅可以免费使用,而且还可以修改源码,来达到我们想要的效果。客户端在得到数据以后,在Flash Player中渲染出报表图。 附带PDF说明文档,是中文版...
Open Flash Chart是一款基于JavaScript的开源图表库,它允许开发者通过简单的JSON数据来创建高质量的Flash图形,包括曲线图、柱状图、饼图等多种图表类型。这个库在Web开发中被广泛使用,尤其是在数据分析和可视化...
总结来说,"open flash chart 实例2"展示了如何利用Open Flash Chart结合HTML和PHP实现数据可视化的过程。通过"chart-2.html"展示图表,"data.php"提供动态数据,两者协同工作,为用户提供了一种灵活、高效且美观的...
1. **多样的图表类型**:Open Flash Chart提供了各种图表类型,如柱状图、折线图、饼图、散点图、雷达图等,满足不同数据可视化需求。 2. **自定义丰富**:用户可以自由定制图表的颜色、大小、样式,甚至添加额外的...
与JFreeChart等Java图表库相比,Open Flash Chart提供了更为丰富的图表类型和自定义选项,能够满足开发者对于动态、交互式图表的需求。 该压缩包“open-flash-chart-1[1].9.7.zip”包含了Open Flash Chart的多个...
《Open Flash Chart-2 简单教程及DEMO解析》 Open Flash Chart-2 是一个开源的Flash图表库,它允许开发者通过简单的JavaScript API创建交互式的、视觉效果丰富的图表。这个库尤其适用于那些需要在网页上展示数据的...
Open Flash Chart,制作图表,柱状图,饼图,线点图,Open Flash Chart的使用说明及参数的设定。
Open Flash Chart是一个基于Flash技术的图表库,它以ActionScript编写,通过在网页中嵌入Flash对象来实现动态的、交互式的图表展示。尽管Flash在现代网页开发中已经逐渐被HTML5取代,但在数据可视化领域,尤其是在...