`
sjsky
  • 浏览: 916889 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

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

阅读更多
    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
<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;
    }
}


-----------------------------------分 ------------------------------------隔 ------------------------------------线 --------------------------------------

  • 大小: 13.5 KB
  • 大小: 22.8 KB
  • 大小: 25.5 KB
  • 大小: 27.4 KB
  • 大小: 40.6 KB
  • 大小: 36.7 KB
4
2
分享到:
评论
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  
收藏啦 好东西  谢谢

相关推荐

    Open Flash Chart 教程

    这个教程可能是为了帮助用户理解如何利用Open Flash Chart来创建动态和定制化的图表,适合Web开发者或者数据分析人员学习。下面我们将深入探讨Open Flash Chart的相关知识点。 1. **Open Flash Chart的基本概念** ...

    open flash chart 2 线性图 柱形图 饼状图

    在实际应用中,Open Flash Chart 2 允许开发者通过JSON格式的数据动态生成图表,这使得它能方便地与服务器端数据源结合,实现动态更新和交互功能。此外,Open Flash Chart 2 还支持自定义图表组件,如图例、工具提示...

    java Open Flash Chart2生成曲线图

    Java Open Flash Chart 2(简称jOFC2)是一个基于Java的开源库,用于生成高质量的Flash图表,包括曲线图。这个库允许开发者在Java应用中轻松地创建动态、交互式的图表,为数据可视化提供了便利。在Java项目中集成...

    open flash chart库

    - **多样化图表类型**:Open Flash Chart支持多种图表类型,如柱状图、折线图、饼图、散点图、雷达图等,满足不同场景的数据展示需求。 - **自定义元素**:开发者可以自由定制图表的各个部分,包括颜色、样式、标签...

    open flash chart2实例

    Open Flash Chart 2是一款强大的开源图表库,它允许开发者创建各种动态、美观的图表,包括饼图、曲线图和柱状图等。这个实例集合提供了一系列的示例代码,帮助我们理解和应用Open Flash Chart 2的功能。下面我们将...

    Open Flash Chart所需文件

    Open Flash Chart是一款强大的开源Flash图表库,用于在Web应用程序中创建高质量、互动的图表。它提供了丰富的自定义选项,能够生成各种类型的图表,包括柱状图、饼图、线点图等,使得数据可视化变得更加简单易行。在...

    完整的open flash chart 。

    3. **图表类型**:Open Flash Chart支持多种图表类型,包括折线图、柱状图、饼图、面积图、散点图、甘特图等。这些图表适用于展示各种类型的数据,如趋势分析、比较、分布等。 4. **数据源**:Open Flash Chart可以...

    开源flash图表--open flash chart

    2. **丰富的图表类型**:Open Flash Chart支持多种图表类型,如折线图、柱状图、饼图、散点图、面积图、甘特图等,能满足各种数据分析和展示的需求。 3. **高度可定制**:开发者可以通过调整各种参数来改变图表的...

    open flash chart 2 使用

    - **选择图表类型**:Open Flash Chart 2 支持多种图表类型,如柱状图、饼图、线图、面积图、散点图等。根据数据特性选择合适的图表类型。 - **设置图表属性**:包括背景色、边框、标题、图例、坐标轴等。大部分...

    Open Flash Chart2 相关资料

    由于最近公司项目中要用到图表,看到Open Flash Chart这个还不错,开源的,而且官方还附带了很多Demo,最重要的是支持很多的语言,只是这个东西一直很久没有更新,在网上找了很多资料,找到了Open Flash Chart社区...

    open-flash-chart2系列教程

    Open Flash Chart 2(简称OFC2)是一款强大的开源图表生成库,专为创建交互式、动态的Flash图表而设计。它允许开发者通过JSON格式的数据来构建各种类型的图表,如折线图、柱状图、饼图等,广泛应用于数据分析、报表...

    Open Flash Chart例子、中文版PDF说明文档、参数表

    Open Flash Chart(简称OFC),是一个开源的flash报表组件。我们不仅可以免费使用,而且还可以修改源码,来达到我们想要的效果。客户端在得到数据以后,在Flash Player中渲染出报表图。  附带PDF说明文档,是中文版...

    open flash chart--js画图形‘曲线等

    Open Flash Chart是一款基于JavaScript的开源图表库,它允许开发者通过简单的JSON数据来创建高质量的Flash图形,包括曲线图、柱状图、饼图等多种图表类型。这个库在Web开发中被广泛使用,尤其是在数据分析和可视化...

    open flash chart 实例2

    总结来说,"open flash chart 实例2"展示了如何利用Open Flash Chart结合HTML和PHP实现数据可视化的过程。通过"chart-2.html"展示图表,"data.php"提供动态数据,两者协同工作,为用户提供了一种灵活、高效且美观的...

    Open Flash Chart 报表插件相关

    1. **多样的图表类型**:Open Flash Chart提供了各种图表类型,如柱状图、折线图、饼图、散点图、雷达图等,满足不同数据可视化需求。 2. **自定义丰富**:用户可以自由定制图表的颜色、大小、样式,甚至添加额外的...

    open-flash-chart-1[1].9.7.zip_flash chart tr_open flash chart

    与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 简单教程及DEMO解析》 Open Flash Chart-2 是一个开源的Flash图表库,它允许开发者通过简单的JavaScript API创建交互式的、视觉效果丰富的图表。这个库尤其适用于那些需要在网页上展示数据的...

    Open Flash Chart的使用说明及参数的设定

    Open Flash Chart,制作图表,柱状图,饼图,线点图,Open Flash Chart的使用说明及参数的设定。

    Open Flash Chart Sample

    Open Flash Chart是一个基于Flash技术的图表库,它以ActionScript编写,通过在网页中嵌入Flash对象来实现动态的、交互式的图表展示。尽管Flash在现代网页开发中已经逐渐被HTML5取代,但在数据可视化领域,尤其是在...

Global site tag (gtag.js) - Google Analytics