Open Flash Chart2实现动态曲线图小结

最新推荐文章于 2021-03-15 21:05:28 发布
最新推荐文章于 2021-03-15 21:05:28 发布
阅读量214 收藏
点赞数
分类专栏： opensource 文章标签： Java Open Flash Chart2 曲线图 json
[color=red]blog迁移至[/color]:[url=http://www.micmiu.com]http://www.micmiu.com[/url]

很久前写过一篇[url=http://sjsky.iteye.com/blog/650043]Open Flash Chart2初步应用[/url]，刚接触的可以看看这篇文章。
最近为了实现动态曲线图展示的功能，对Open Flash Chart2又小小研究了下，研究和整合过程中遇到的各种各样的问题，现在对重点问题的解决方法在此总结下，方便自己日后回顾，也希望能给有同样需求的同仁们提供帮助。

[size=x-large][color=red]本文的重点就是解决OFC2和第三方JS的冲突[/color]，基本目录结构：[/size]
[color=blue][一]、Open Flash Chart2中javascript基本方法的介绍
[二]、OFC2与Prototype.js的冲突解决
[三]、OFC2与Ext.Viewport的冲突解决
[四]、动态流量曲线图的demo[/color]
[color=red]ps：
1.本文demo是在tomcat下发布后测试的，涉及的到部分html页面是不能脱离Web应用服务器的
2.demo中的有关js、swf的路径请根据自己项目的路径具体情况调整[/color]

[size=x-large][color=blue]【一】OFC2的javascript基本方法[/color][/size]
[color=blue]open_flash_chart_data()[/color] 将画图的数据以string的方式传递给chart
[color=blue]ofc_ready()[/color] 数据加载好后会执行这个函数的
具体的作用及执行顺序可以试着运行下面这个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>

运行结果示例图：

[img]http://dl.iteye.com/upload/attachment/465066/18807af6-ea29-320e-9e65-1eee712dafe7.jpg[/img]

[img]http://dl.iteye.com/upload/attachment/465068/eda1d79a-29c5-359f-9b8b-06ecf6118076.jpg[/img]

[img]http://dl.iteye.com/upload/attachment/465070/a7c0ea31-5048-3bad-b397-b7cb57323b9d.jpg[/img]

OFC2提供[color=blue]function load()[/color]方法，可以更新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>

运行结果示例图：

[img]http://dl.iteye.com/upload/attachment/465076/50f46f41-ac7f-3ce1-b588-86b5e4f1126a.jpg[/img]

[img]http://dl.iteye.com/upload/attachment/465078/b18d274f-6e02-3e3d-890b-2ee57219eefd.jpg[/img]

[size=x-large][color=blue]【二】、OFC2与prototype.js冲突问题[/color][/size]
在我实验的过程中发现，如果只是第一次加载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)转化后的格式不一致引起的，在接下来的测试和调试中发现转化后的格式的确不一致，但这个发现不是问题的根源，最后找了一个折中的方法解决了这个问题：
[list]
[*]先把json2.js这个文件从页面中里移除
[*]然后load(JSON.stringify(chartdata))改成[color=red]load(Object.toJSON(chartdata))[/color]
[/list] 
<%@ 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>

[size=x-large][color=blue]【三】OFC2与Ext.Viewport的冲突问题[/color][/size]
如果你的页面里用到了Ext.Viewport来布局，会发现在IE下findSWF('ofc2_id').load(Object.toJSON(chartdata));再一次的发生了杯具，FF下一切正常，而在IE下页面会有js错误提示:“未指明的错误”，这个错误的原因至今没有找到，js debug以及后来查了很多资料也没有确切结果，最后在ext的论坛上找了一个有关该问题的讨论，提供了一个扩展js库uxmedia，可以解决该问题，
相关讨论的帖子：[url=http://www.sencha.com/forum/showthread.php?23983-ux.Media-.Flash-Flex-Components-2.1.2]http://www.sencha.com/forum/showthread.php?23983-ux.Media-.Flash-Flex-Components-2.1.2[/url]
uxmedia的官网：[url=http://code.google.com/p/uxmedia/]http://code.google.com/p/uxmedia/[/url]
uxmedia API doc:[url=http://uxdocs.theactivegroup.com/]http://uxdocs.theactivegroup.com/[/url]
基本的解决方法：[list]
[color=blue][*]导入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
[/list][/color]
页面代码片段： 
<%@ 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>

效果图如下：

[img]http://dl.iteye.com/upload/attachment/465111/1ca4e7d1-b095-3439-a0b7-d42feaddc92f.jpg[/img]

[size=x-large][color=blue]【四】动态曲线的简单demo代码[/color][/size]
实时流量动态图的效果如上，基本实现的代码如下，demo是个随机数模拟流量的（有关snmp采集端口流量的代码就不在这里贴出了 :D ）：
[size=large][color=blue]FlowChart2Vo .java[/color][/size] 
/**
 * @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方法省略
    //.........

[size=large][color=blue]DrawOfc2RealTimeDemoAction.java[/color][/size] 
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;
    }
}


-----------------------------------分 ------------------------------------隔 ------------------------------------线 --------------------------------------
sjsky_007
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
java Open Flash Chart2生成曲线图
09-05
jofc2(open flash chart2 - java)生成的曲线图，附带jar包，导入项目即可显示
open flash chart 2 线性图 柱形图 饼状图
07-17
在实际应用中，Open Flash Chart 2 允许开发者通过JSON格式的数据动态生成图表，这使得它能方便地与服务器端数据源结合，实现动态更新和交互功能。此外，Open Flash Chart 2 还支持自定义图表组件，如图例、工具提示...
Open Flash Chart 曲线
weixin_33887443的博客
08-26 60
1、官方网站：http://teethgrinder.co.uk/open-flash-chart/download.php 2、介绍OpenFlashChart的博客：http://www.cnblogs.com/yaunion/archive/2009/03/18/1409321.html 转载于:https://www.cnblogs.com/Godblessyou/archive/20...
Open Flash Chart 之线图
ajwqb06628的专栏
05-08 104
Open Flash Chart 之线图 　　今天公司要求开发一个曲线图，简单看了一下之前公司的一个系统，发现一个曲线图效果还不错，查了一下叫OpenFlashChart，还是很不错的，很多人用。研究了一下，发现还不错，特地写了个DEMO测试下。 public...
用Flash与C语言制作工程实时数据动态曲线图
萝卜 白菜
09-05 6285
用Flash与C语言制作工程实时数据动态曲线图宋国志 songguozhi1234@163.com本文旨在说明如何利用Flash和C语言制作BS模式下的实时数据动态曲线图，现在流行的实时数据曲线图，大都是采用了CS模式的开发语言，BS模式的虽有一些实例，比如google上的股市曲线图，但其实现的方式和流程在网上很少能见到。其运行时的界面如下，数据实时更新，曲线图从左往右动态移动： 
OpenFlashChartDemo动态数据显示
wulei4的专栏
10-23 122
&lt;%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%&gt; &lt;html&gt; &lt;script type="text/javascript" src="&lt;%=request.getContextPath() %&gt;/ofc2/swfobject.
open flash chart2实例
07-31
Open Flash Chart 2是一款强大的开源图表库，它允许开发者创建各种动态、美观的图表，包括饼图、曲线图和柱状图等。这个实例集合提供了一系列的示例代码，帮助我们理解和应用Open Flash Chart 2的功能。下面我们将...
open-flash-chart-1[1].9.7.zip_flash chart tr_open flash chart
09-14
与JFreeChart等Java图表库相比，Open Flash Chart提供了更为丰富的图表类型和自定义选项，能够满足开发者对于动态、交互式图表的需求。 该压缩包“open-flash-chart-1[1].9.7.zip”包含了Open Flash Chart的多个...
Open-Flash-Chart手册chm格式文档压缩包
最新发布
07-09
Open-Flash-Chart（简称OFC）是一个开源的Flash图表绘制工具，它提供了丰富的图表类型和强大的配置选项，使得数据可视化变得简单而直观。Open-Flash-Chart免费开源，用户可以自由使用、修改和分发其源代码。它基于...
open-flash-chart API 手册 参数配置手册
技术百科
06-08 133
 open-flash-chart是一个flash图形工具，主要通过JS设置参数来控制图形的显示，主要有线、柱状及饼图. 基本上能满足数据统计分析的图形化显示需求。 优点：使用方便，一般浏览器都能支持使用，提供回调功能支持更高级的处理。 目录下JS是与swf交互的核心脚本，不过有些地方好像写得不大好，有些语法不遵从W3C标准，呵~~ 一点见解：个人觉得用ajax请求数据，然后在前台控制图形...
OpenFlashChart2之恶心文档
求贤若渴, 礼贤下士
03-28 131
N久没有做界面相关的项目了，最近一个核心项目中正好有用到几个图形报表的界面，原本一直使用jfreechar，但是这种服务器生成图片，然后浏览器再请求图片，并显示，这种做法一是加大服务器压力，而是加大网络传输的带宽，降低了用户体验，比较好的方式是服务器提供元数据，客户端根据元数据生成对应的图形报表。显然，后一种模式既能有效利用客户机的资源，也减少了带宽，降低了服务器压力。提高了用户体验，唯一的不足是...
swfobject.js统计曲线图。。。
pei_zhengxi
08-20 150
[align=left][align=center][/align][code="java"] swfobject.js /** * SWFObject v1.5: Flash Player detection and embed - http://blog.deconcept.com/swfobject/ * * SWFObject is (c) 2007 Geoff Ste...
FLASH在IE6下Error 2032错的处理
freelove_2005的专栏
08-13 1154
http://lersh.blog.163.com/blog/static/104974220080494558881/ Flash在IE6中POST数据时会出现ioerror Error #2032 这个错误是Gzip和no-cache同时出现造成的。 解决方法是在返回的页面里增加HTTP头， Response.AppendHeader("Cache-Control", "no-cach
Flash图表组件——使用Open Flash Chart 2.0的一些问题及解决办法
大头爸爸的博客
08-23 5377
Open Flash Chart 2.0 是一个用来生成Flash的图表的组件，开源、免费、功能强大、图表漂亮且可以显示提示信息，是本人目前认为最好的一款flash图表绘制组件。其图表数据格式为JSON。 本篇文章主要目的是记述本人在使用Open Flash Chart 2.0 过程中所遇见的问题及解决办法总汇。 一、原解压包中的实例不能演示Flash图表 解压open-flash-char
java生成统计图_java怎么从数据库里获得动态数据生成统计图
weixin_39744408的博客
02-12 684
展开全部我这个是使用的62616964757a686964616fe78988e69d8331333363373833echarts的饼图，如果需要使用到其他的图形，可以在echarts的官网上面去找找，上面各种的图都有例子option = {title : {//图中2的位置text: '某站点用户访问来源',subtext: '纯属虚构',x:'center'},tooltip : {trig...
java ajax动态加载数据_java实现的highcharts与ajax结合动态实时获取数据更新图表
weixin_42393261的博客
02-23 210
java实现的highcharts与ajax结合动态实时获取数据更新图表博客分类：javajspjavajsphighchartsajax实时刷新Highcharts Example//x轴值var categories=;//y轴值var data=;//创建图表var chart;$(document).ready(function() {chart = new Highcharts.Char...
java数据实时展示图表,从Firebase实时数据库创建图表
weixin_36021459的博客
03-15 232
我根据时间戳在firebase中保存数据，每天发送3次或4次数据 . 现在我想制作一个月的图表并从时间戳开始到结束时获取该月的数据，但我得到一天的3或4个记录 . 我想将当天的所有多个记录添加为单个记录，并制作该月的图表 . 这是我用来获取所有重新编码的代码Query query = refpetrol.child("Data").orderByChild("timestamp").startAt...
OpenFlashChat2：JSON驱动的Flex闪存图表教程与常见问题解决方案
其官方网站<http://teethgrinder.co.uk/open-flash-chart-2/>提供了详尽的文档和示例，方便用户学习和上手。 该工具支持多种编程语言，如Java和PHP，其中Java编写的代码效果良好。然而，尽管功能强大，OpenFlash...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值