ofc2使用笔记

于 2010-08-14 18:01:29 发布
阅读量229 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： Web前端 文章标签： json Servlet Flex Cache Flash
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/JAVAZHICHIZHE/article/details/83694067
本文介绍如何在JSP页面中使用Flex图表组件展示动态数据。通过具体示例展示了LineChart、PieChart及BarChart的实现过程，包括前端页面配置与后端Servlet的数据处理。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

分在jsp页面中使用与flex页面显示两部分：
一： JSP页面
<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>
<html>
<head>
<script type="text/javascript" src="js/swfobject.js"></script>
        <script type="text/javascript" src="js/json2.js"></script>
		<script type="text/javascript">
		 	//<![CDATA[
		 	swfobject.embedSWF(
             "open-flash-chart.swf",
             "my_chart",
             "40%",
             "40%",
             "9.0.0",
             "expressInstall.swf",
             {"data-file":"<%=request.getContextPath()%>/LineChartServlet"},
             {wmode:"transparent"});
		     //]]>
		 </script>


</head>
<body>
<p>Hello World</p>
<div id="my_chart"></div>
</body>
</html>


记得将open-flash-chart.swf放在工程的根目录下。

二、 Flex界面
导入xxx.swc文件,并在mxml中进行声明如 xmlns:ofc="*" 然后在页面中如此使用：
<ofc:Chart chartData="{json格式}" .../>
xxx.swc稍后会上传... ...

三： 后台代码（Servlet部分）：
LineChartServlet
package mydashboard;

import java.io.IOException;

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.Label;
import jofc2.model.axis.XAxis;
import jofc2.model.axis.YAxis;
import jofc2.model.elements.Legend;
import jofc2.model.elements.LineChart;
import jofc2.model.elements.StackedBarChart;
import jofc2.model.elements.Tooltip;

public class LineChartServlet extends HttpServlet {

	// Initialize global variables
	public void init() throws ServletException {
		// TODO Auto-generated method stub

	}

	// Process the HTTP Get request
	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		try{

			LineChart lineChart = new LineChart();

			lineChart.setFontSize(15);// 设置字体

			lineChart.setTooltip("#val#%");//设置鼠标移到点上显示的内容


			LineChart.Dot dot1 = new LineChart.Dot(70);//按照顺序设置各个点的值
			LineChart.Dot dot2 = new LineChart.Dot(85);
			LineChart.Dot dot3 = new LineChart.Dot(44);
			LineChart.Dot dot4 = new LineChart.Dot(67);
			LineChart.Dot dot5 = new LineChart.Dot(90);
			LineChart.Dot dot6 = new LineChart.Dot(64);
			LineChart.Dot dot7 = new LineChart.Dot(28);
			LineChart.Dot dot8 = new LineChart.Dot(99);


            lineChart.addDots(dot1);//按照顺序把点加入到图形中
			lineChart.addDots(dot2);
			lineChart.addDots(dot3);
			lineChart.addDots(dot4);
			lineChart.addDots(dot5);
			lineChart.addDots(dot6);
			lineChart.addDots(dot7);
			lineChart.addDots(dot8);
			lineChart.setColour("0x336699");
//			
			//内存使用曲线
//			LineChart lineChartMem = new LineChart();
//			lineChartMem.setFontSize(15);
//            lineChartMem.setTooltip("#var#%");
//			LineChart.Dot dotMem1 = new LineChart.Dot(30);
//			LineChart.Dot dotMem2 = new LineChart.Dot(34);
//			LineChart.Dot dotMem3 = new LineChart.Dot(52);
//			LineChart.Dot dotMem4 = new LineChart.Dot(35);
//			LineChart.Dot dotMem5 = new LineChart.Dot(58);
//			LineChart.Dot dotMem6 = new LineChart.Dot(69);
//			LineChart.Dot dotMem7 = new LineChart.Dot(43);
//			LineChart.Dot dotMem8 = new LineChart.Dot(54);
//			
//			lineChartMem.addDots(dotMem1);
//			lineChartMem.addDots(dotMem2);
//			lineChartMem.addDots(dotMem3);
//			lineChartMem.addDots(dotMem4);
//			lineChartMem.addDots(dotMem5);
//			lineChartMem.addDots(dotMem6);
//			lineChartMem.addDots(dotMem7);
//			lineChartMem.addDots(dotMem8);
//			
//			lineChartMem.setColour("#D54C78");
//			
//			//磁盘使用曲线
//			LineChart lineChartDisk = new LineChart();
//			lineChartMem.setFontSize(15);
//            lineChartMem.setTooltip("这是内存sdsdfsdd");
//			LineChart.Dot dotDisk1 = new LineChart.Dot(42);
//			LineChart.Dot dotDisk2 = new LineChart.Dot(67);
//			LineChart.Dot dotDisk3 = new LineChart.Dot(83);
//			LineChart.Dot dotDisk4 = new LineChart.Dot(94);
//			LineChart.Dot dotDisk5 = new LineChart.Dot(82);
//			LineChart.Dot dotDisk6 = new LineChart.Dot(55);
//			LineChart.Dot dotDisk7 = new LineChart.Dot(63);
//			LineChart.Dot dotDisk8 = new LineChart.Dot(54);
//			
//			lineChartDisk.addDots(dotDisk1);
//			lineChartDisk.addDots(dotDisk2);
//			lineChartDisk.addDots(dotDisk3);
//			lineChartDisk.addDots(dotDisk4);
//			lineChartDisk.addDots(dotDisk5);
//			lineChartDisk.addDots(dotDisk6);
//			lineChartDisk.addDots(dotDisk7);
//			lineChartDisk.addDots(dotDisk8);
//			
//            lineChartDisk.setColour("#3334AD");

//			XAxis x = new XAxis(); // X 轴
//
//			x.addLabels("11:05"); //每5分钟轮询一次
//			x.addLabels("11:10");
//			x.addLabels("11:15");
//			x.addLabels("11:20");
//			x.addLabels("11:25");
//			x.addLabels("11:30");
//			x.addLabels("11:35");
//			x.addLabels("11:40");
//            Label label = new Label();
//            label.setText("时间");
//            x.addLabels(label);
			//x.setColour("0x000000");


			double max = 100.0; // //Y 轴最大值

			YAxis ycpu = new YAxis();  //y 轴 (CPU) 

			ycpu.setMax(max); //y 轴最大值  

			ycpu.setSteps(10); // 步进  


//			double max2 = 4000.0;
//			YAxis ymem = new YAxis(); //y轴(Mem)
//			ymem.setMax(max2);
//			ymem.setSteps(500);
//			ymem.addLabels("dsdsds");
//			lineChartMem.setRightYAxis();//LineChartMem使用右边的纵坐标
//			lineChartMem.setColour("#009100");
//			lineChartMem.setYAxis("yaoyaoy");

			Chart flashChart = new Chart( " 资源使用率 " , "font-size:12px;color:#ff0000;" ); // 整个图的标题 


            //Element[] elements = {lineChart, lineChartMem};
//			HashSet hashSet = new HashSet();
//			hashSet.add(lineChart);
//			hashSet.add(lineChartMem);
//			flashChart.addElements(hashSet); // 把线状图加入到图表   --为什么只显示一条线? 
			//flashChart.addElements(lineChartMem);



			Text yText = new Text("Usage(%)",Text.createStyle(10, "#736AFF",Text.TEXT_ALIGN_LEFT));
			//Text yText2 = new Text("Mem(Mb)",Text.createStyle(20, "#009100", Text.TEXT_ALIGN_RIGHT));


//			Legend legend = new Legend();
			//legend.set
			//flashChart.setXAxis(x);  

//			lineChart.setYAxis("资源使用率");
			//lineChart.setTooltip("tooltip");

//			Label lbl1 = new Label("CPU");
//			Label lbl2 = new Label("磁盘");
//			Label lbl3 = new Label("内存");
//			lbl1.setColour("0x336699");
//			lbl2.setColour("#3334AD");
//			lbl3.setColour("#D54C78");

//			lineChart.setText("CPU");
//			lineChartDisk.setText("Disk");
//			lineChartMem.setText("Memory");


//			flashChart.addElements(lineChartMem);
//			flashChart.addElements(lineChartDisk);
			flashChart.addElements(lineChart);

//			Tooltip tip1 = new Tooltip();
//			tip1.setTitleStyle("测试");
			flashChart.setYAxis(ycpu); 


			flashChart.setYLegend(yText);//设置y轴显示内容
			//flashChart.setYLegend(yText2);

			//设置Label
//		    Label label = new Label();
//		    label.setColour("green");
//		    label.setText("Mem");

			//legend.set

			String json = flashChart.toString();// 转成 json 格式
			System.out.println("json content: "+json);

			response.setContentType( "application/json-rpc;charset=utf-8" );

			response.setHeader( "Cache-Control" , "no-cache" );

			response.setHeader( "Expires" , "0" );

			response.setHeader( "Pragma" , "No-cache" );   

			response.getWriter().print(json);// 写到客户端

			}catch(Exception ex){
			ex.printStackTrace();
			}


	}

	// Clean up resources
	public void destroy() {
		// TODO Auto-generated method stub

	}

}


PieChartServlet:
package mydashboard;

import java.io.IOException;

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.elements.PieChart;


public class PieChartServlet extends HttpServlet {

	// Initialize global variables
	public void init() throws ServletException {
		// TODO Auto-generated method stub

	}

	// Process the HTTP Get request
	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		try{
			PieChart   pie =   new    PieChart();

			pie.setFontSize(15);// 设置字体

			pie.addSlice(200000000, " 研发经费 " );// 分类

			pie.addSlice(60000000, " 旅游经费 " );

			pie.addSlice(30000000, " 推广经费 " );

			pie.addSlice(20000000, " 创业经费 " );


            pie.setBorder(500);

			pie.setStartAngle(60);// 设置角度

			pie.setAnimate( true ); //设置动态效果

			// 设置颜色 (自己调制颜色时该如何调... ... )

			pie.setColours( new String[] { "0x336699" , "0x88AACC" , "0x999933" ,

			"0x666699" , "0xCC9933" , "0x006666" , "0x3399FF" , "0x993300" ,

			"0xAAAA77" , "0x666666" , "0xFFCC66" , "0x6699CC" , "0x663366" ,

			"0x9999CC" , "0xAAAAAA" , "0x669999" , "0xBBBB55" , "0xCC6600" ,

			"0x9999FF" , "0x0066CC" , "0x99CCCC" , "0x999999" , "0xFFCC00" ,

			"0x009999" , "0x99CC33" , "0xFF9900" , "0x999966" , "0x66CCCC" ,

			"0x339966" , "0xCCCC33" });

			pie.setTooltip( "#val#  /  #total#<br> 占百分之 #percent#");// 鼠标移动上去后提示内容

			pie.setRadius(100); //设置半径大小

			Chart flashChart = new Chart( " 2009至2010年度 Apusic财务分析 " , "font-size:30px;color:#ff0000;" ); // 整个图的标题
			//flashChart.setBackgroundColour("#3EFFFF");

			flashChart.addElements(pie); // 把饼图加入到图表  

			String json = flashChart.toString();// 转成 json 格式
            System.out.println(json);

			response.setContentType( "application/json-rpc;charset=utf-8" );

			response.setHeader( "Cache-Control" , "no-cache" );

			response.setHeader( "Expires" , "0" );

			response.setHeader( "Pragma" , "No-cache" );   

			response.getWriter().print(json);// 写到客户端

			}catch(Exception ex){
			ex.printStackTrace();
			}

	}

	// Clean up resources
	public void destroy() {
		// TODO Auto-generated method stub

	}

}


BarChartServlet:
package mydashboard;

import java.io.IOException;
import java.util.HashMap;
import java.util.Map;

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.axis.XAxis;
import jofc2.model.axis.YAxis;
import jofc2.model.elements.BarChart;

import jofc2.model.elements.BarChart.Bar;


public class BarChartServlet extends HttpServlet {

	// Initialize global variables
	public void init() throws ServletException {
		// TODO Auto-generated method stub

	}

	// Process the HTTP Get request
	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		// TODO Auto-generated method stub
		try{

			BarChart chart = new BarChart(BarChart.Style. GLASS ); // 设置条状图样式

			//FilledBarChart chart = new FilledBarChart("red","blue");// 设置条状图样式

			//String sMax = "10000" ;

			long max = 900; // //Y 轴最大值


			Map<String,Long> map = new HashMap<String,Long>();

			map.put( "5" , new Long(50));

			map.put( "6" , new Long(45));

			map.put( "7" , new Long(60));

			map.put( "8" , new Long(30));

			map.put( "9" , new Long(80));

			map.put( "10" , new Long(500));

			map.put( "11" , new Long(800));

			map.put( "12" , new Long(200));


			XAxis x = new XAxis(); // X 轴

			int i = 5;

			for (String key:map.keySet()){

			x.addLabels(i+"月份"); // x 轴的文字

			Bar bar = new Bar(map.get(""+i), " 万元 " );

			i++;

			bar.setColour( "0x336699" ); // 颜色

			bar.setTooltip(map.get(""+i) + " 万元 " ); // 鼠标移动上去后的提示

			chart.addBars(bar); // 条标题，显示在 x 轴上

			}


			Chart flashChart = new Chart();         

			flashChart.addElements(chart); // 把柱图加入到图表      

			YAxis y = new YAxis();  //y 轴  

			y.setMax(max+10.0); //y 轴最大值  

			y.setSteps(max/10*1.0); // 步进  

			flashChart.setYAxis(y); 

			flashChart.setXAxis(x); 

			String json = flashChart.toString();


			response.setContentType( "application/json-rpc;charset=utf-8" );

			response.setHeader( "Cache-Control" , "no-cache" );

			response.setHeader( "Expires" , "0" );

			response.setHeader( "Pragma" , "No-cache" );   

			response.getWriter().print(json);// 写到客户端

			}catch(Exception ex){
			ex.printStackTrace();
			}

	}

	// Clean up resources
	public void destroy() {
		// TODO Auto-generated method stub

	}

}


BarChart2Servlet:
package mydashboard;

import java.io.IOException;
import java.util.List;

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.StackedBarChart;


public class BarChart2Servlet extends HttpServlet {

	// Initialize global variables
	public void init() throws ServletException {
		// TODO Auto-generated method stub

	}

	// Process the HTTP Get request
	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		try{

//			StackedBarChart chart = new StackedBarChart( ); // 设置组合柱状图
//
//			long max = 900; // //Y 轴最大值
//
//
//
//			Map<String,Long> map = new HashMap<String,Long>();
//
//			map.put( "5" , new Long(50));
//
//			map.put( "6" , new Long(45));
//
//			map.put( "7" , new Long(60));
//
//			map.put( "8" , new Long(30));
//
//			map.put( "9" , new Long(80));
//
//			map.put( "10" , new Long(500));
//
//			map.put( "11" , new Long(800));
//
//			map.put( "12" , new Long(200));
//
//
//
//			XAxis x = new XAxis(); // X 轴
//
//			x.set3D(0);
//
//			x.setColour("#909090");
//
//			x.setGridColour("#ADB5C7");
//
//			int i = 5;
//
//			for (String key:map.keySet()){
//
//			StackedBarChart.Stack stack = new StackedBarChart.Stack();//新建柱组
//
//			x.addLabels("x"+i); // x 轴的文字
//
//			StackedBarChart.StackValue stackValue = new StackedBarChart.StackValue(map.get(""+i),"0x336699");//每组柱状图每个柱的设置
//			StackedBarChart.StackValue stackValue2 = new StackedBarChart.StackValue(i * 5 + 10,"#3334AD");
//			StackedBarChart.StackValue stackValue3 = new StackedBarChart.StackValue(i * 10 + 20,"#D54C78");
//
//			i++;
//
//			stack.addStackValues(stackValue);
//			stack.addStackValues(stackValue2);
//			stack.addStackValues(stackValue3);
//
//			chart.addStack(stack); // 条标题，显示在 x 轴上
//
//			}
//
//
//			StackedBarChart.Key key1 = new StackedBarChart.Key("0x336699","Apusic",20);
//			StackedBarChart.Key key2 = new StackedBarChart.Key("#3334AD","EAS",20);
//			StackedBarChart.Key key3 = new StackedBarChart.Key("#D54C78","KIS",20);
//
//			chart.addKeys(key1);
//			chart.addKeys(key2);
//			chart.addKeys(key3);
//
//			Chart flashChart = new Chart("主机性能监控图","{font-size:20px; color: #FFFFFF; margin: 5px; background-color: #505050; padding:5px; padding-left: 20px; padding-right: 20px;}");         
//
//			flashChart.addElements(chart); // 把柱图加入到图表      
//
//			YAxis y = new YAxis();  //y 轴  
//
//			y.set3D(0);
//
//			y.setColour("#909090");
//
//			y.setGridColour("#ADB5C7");
//
//			y.setMax(max+10.0); //y 轴最大值  
//
//			y.setSteps(max/10*1.0); // 步进  
//
//			flashChart.setYAxis(y); 
//
//			flashChart.setXAxis(x); 
//
//			Text text = new Text("Resource Usage");
//
//			text.setStyle(Text.createStyle(15, "#736AFF", Text.TEXT_ALIGN_RIGHT));
//
//			flashChart.setYLegend(text);//设置Y轴左侧的文字
//
//			String json = flashChart.toString();

			String charts="";
			StackedBarChart chart = new StackedBarChart(); // 设置组合柱状图
	        long max = 90; // //Y 轴最大值

	        //Set<Usinginfo> set = getHostsByUser(user);

	         //List<Usinginfo> results = new Usinginfo().findLatestInfos();
//			Map<String,Long> map = new HashMap<String,Long>();
	//
//			map.put( "5" , new Long(50));
	//
//			map.put( "6" , new Long(45));
	//
//			map.put( "7" , new Long(60));
	//
//			map.put( "8" , new Long(30));
	//
//			map.put( "9" , new Long(80));
	//
//			map.put( "10" , new Long(500));
	//
//			map.put( "11" , new Long(800));
	//
//			map.put( "12" , new Long(200));


			XAxis x = new XAxis(); // X 轴

			x.set3D(0);

			x.setColour("#909090");

			x.setGridColour("#ADB5C7");
//	        
//	       for(int i=0; i<results.size();i++){
//	        	
//	        	StackedBarChart.Stack stack = new StackedBarChart.Stack();//新建柱组
//	        	x.addLabels("x"+i); // x 轴的文字
//	        	StackedBarChart.StackValue stackValue = new StackedBarChart.StackValue(results.get(i).getDiskRatio(),"0x336699");//每组柱状图每个柱的设置
//	    		StackedBarChart.StackValue stackValue2 = new StackedBarChart.StackValue(results.get(i).getCpuRatio(),"#3334AD");
//	    		StackedBarChart.StackValue stackValue3 = new StackedBarChart.StackValue(results.get(i).getMemRatio(),"#D54C78");
//
//	    		stack.addStackValues(stackValue);
//	    		stack.addStackValues(stackValue2);
//	    		stack.addStackValues(stackValue3);
//
//	            chart.addStack(stack); // 条标题，显示在 x 轴上
//	        }



			StackedBarChart.Key key1 = new StackedBarChart.Key("0x336699","Apusic",20);
			StackedBarChart.Key key2 = new StackedBarChart.Key("#3334AD","EAS",20);
			StackedBarChart.Key key3 = new StackedBarChart.Key("#D54C78","KIS",20);

			chart.addKeys(key1);
			chart.addKeys(key2);
			chart.addKeys(key3);

			Chart flashChart = new Chart("主机性能监控图","{font-size:20px; color: #FFFFFF; margin: 5px; background-color: #505050; padding:5px; padding-left: 20px; padding-right: 20px;}");         

			flashChart.addElements(chart); // 把柱图加入到图表      

			YAxis y = new YAxis();  //y 轴  

			y.set3D(0);

			y.setColour("#909090");

			y.setGridColour("#ADB5C7");

			y.setMax(max+10.0); //y 轴最大值  

			y.setSteps(max/10*1.0); // 步进  

			flashChart.setYAxis(y); 

			flashChart.setXAxis(x); 

			Text text = new Text("Resource Usage");

			text.setStyle(Text.createStyle(15, "#736AFF", Text.TEXT_ALIGN_RIGHT));

			flashChart.setYLegend(text);//设置Y轴左侧的文字

			charts = flashChart.toString();
			System.out.println("获得json: "+charts);

            response.setContentType( "application/json-rpc;charset=utf-8" );

			response.setHeader( "Cache-Control" , "no-cache" );

			response.setHeader( "Expires" , "0" );

			response.setHeader( "Pragma" , "No-cache" );   

			response.getWriter().print(charts);// 写到客户端

			}catch(Exception ex){
			ex.printStackTrace();
			}
	}

	// Clean up resources
	public void destroy() {
		// TODO Auto-generated method stub

	}

}


问题： lineChart上设置的toolTip无效
pieChart的tooltip在flex界面显示时离图本身距离过远（若你将pieChart的父组件的x与y都设为0则不会出现这问题，但这没实际意义）
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值