分在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则不会出现这问题,但这没实际意义)
1 楼
richard_2010
2011-08-19
问题: lineChart上设置的toolTip无效
------------
请问你现在解决这个问题没?
------------
请问你现在解决这个问题没?
2 楼
liaoshaoyao
2011-08-27
没解决,后来换图表组件了。