ofc2使用笔记
分在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 variablespublic void init() throws ServletException {// TODO Auto-generated method stub}// Process the HTTP Get requestpublic 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.setString 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 resourcespublic 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 variablespublic void init() throws ServletException {// TODO Auto-generated method stub}// Process the HTTP Get requestpublic 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 resourcespublic 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 variablespublic void init() throws ServletException {// TODO Auto-generated method stub}// Process the HTTP Get requestpublic void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {// TODO Auto-generated method stubtry{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 resourcespublic 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 variablespublic void init() throws ServletException {// TODO Auto-generated method stub}// Process the HTTP Get requestpublic 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 resourcespublic void destroy() {// TODO Auto-generated method stub}}问题： lineChart上设置的toolTip无效
pieChart的tooltip在flex界面显示时离图本身距离过远（若你将pieChart的父组件的x与y都设为0则不会出现这问题，但这没实际意义）
1 楼 richard_2010 2011-08-19 问题： lineChart上设置的toolTip无效
------------
请问你现在解决这个问题没？ 2 楼 liaoshaoyao 2011-08-27 没解决，后来换图表组件了。