您的位置: 首页  >  IT文章  >  使用Open Flash Chart(OFC)制作图表(Struts2处理)

使用Open Flash Chart(OFC)制作图表(Struts2处理)

分类: IT文章 • 2022-05-07 09:16:46
Java代码  使用Open Flash Chart(OFC)制作图表(Struts2处理)
  1. package xxx.app.action.chart;  
  2. import java.util.ArrayList;  
  3. import java.util.List;  
  4. import java.util.Map;  
  5. import javax.servlet.http.HttpServletResponse;  
  6. import org.apache.struts2.ServletActionContext;  
  7. import jofc2.model.Chart;  
  8. import jofc2.model.axis.Label;  
  9. import jofc2.model.axis.XAxis;  
  10. import jofc2.model.axis.YAxis;  
  11. import jofc2.model.elements.LineChart;  
  12. import xxx.app.action.BaseAction;  
  13. public class OfcChartAction extends BaseAction {  
  14.     private Chart ofcChart;  
  15.     public Chart getOfcChart() {  
  16.         return ofcChart;  
  17.     }  
  18.     public String showChart() throws Exception{  
  19.         //y轴数据集合-使用数量  
  20.         List<Number> dataSet = new ArrayList<Number>();  
  21.         //x轴数据集合-浏览器类型  
  22.         List<Label> xLabel = new ArrayList<Label>();  
  23.         //获取需要显示的数据集  
  24.         List browserList = getServMgr().getVisitStatService().getBrowserStat();  
  25.         for (int i = 0; i < browserList.size(); i++) {  
  26.             Map map = (Map) browserList.get(i);  
  27.             //填充x轴  
  28.             dataSet.add((Integer) map.get("statCount"));  
  29.             //填充y轴  
  30.             xLabel.add(new Label((String) map.get("statVar")));  
  31.         }  
  32.         //设置X轴内容  
  33.         XAxis labels = new XAxis();  
  34.         labels.addLabels(xLabel);  
  35.         //设置Y轴显示值域:Range的三个参数含义为：坐标最小值，最大值和步进值  
  36.         YAxis range = new YAxis();  
  37.         range.setRange(0, 200, 10);  
  38.         //OFC折线图设置  
  39.         LineChart lineChart = new LineChart(LineChart.Style.NORMAL);  
  40.         lineChart.addValues(dataSet);  
  41.         lineChart.setColour("#6666FF");  
  42.         lineChart.setText("使用者数量");  
  43.         //图表设置  
  44.         Chart chart = new Chart("用户浏览器使用量分布");  
  45.         chart.setXAxis(labels);  
  46.         chart.setYAxis(range);  
  47.         chart.addElements(lineChart);  
  48.         //打印JSON格式的文本  
  49.         System.out.print(chart.toString());  
  50.         HttpServletResponse response = ServletActionContext.getResponse();  
  51.         response.setContentType("application/json-rpc;charset=utf-8");  
  52.         response.setHeader("Cache-Control", "no-cache");  
  53.         response.setHeader("Expires", "0");  
  54.         response.setHeader("Pragma", "No-cache");  
  55.         response.getWriter().write(chart.toString());  
  56.         return null;  
  57.     }  
  58. }  

    Service中获取数据我们使用Spring的JdbcTemplate进行。 
Java代码  使用Open Flash Chart(OFC)制作图表(Struts2处理)
  1.     //获取记录的浏览器信息  
  2. private static final String SQL_GET_BROWER_STAT = "select statVar,statCount from nd_stats where statType='browser'";  
  3. /** 
  4.  * 获取记录的浏览器信息 
  5.  */  
  6. public List getBrowserStat() {  
  7.     return jt.queryForList(SQL_GET_BROWER_STAT);  
  8. }  

    写好Action，我们简单配置一下，因为我们只是得到JSON文本，所以不必配置跳转，只需配置请求即可。 
Xml代码  使用Open Flash Chart(OFC)制作图表(Struts2处理)
  1. <action name="ofcChart" class="xxx.app.action.chart.OfcChartAction">  
  2. </action>  

    页面的JS代码也很简单。如下即可： 
Html代码  使用Open Flash Chart(OFC)制作图表(Struts2处理)
  1. <script type="text/javascript" src="${base}/js/swfobject.js"></script>  
  2. <script type="text/javascript">  
  3.     var flashvars = {"data-file":"${base}/manage/stat/ofcChart!showChart.action"};  
  4.     var params = {menu: "false",scale: "noScale",wmode:"opaque"};  
  5.     swfobject.embedSWF("${base}/swf/open-flash-chart.swf", "chart", "600px", "400px", "9.0.0",  
  6.     "expressInstall.swf",flashvars,params);  
  7. </script>  
  8. <div id="chart">  
  9. </div>  

    这里需要多说几句，首先是路径，不能错了，错了就请求不到数据了。Swfobject.js是页面使用JS方式配置Flash显示的，比较方便，所有使用它了。设置一个div用于Flash的显示，这个id是embedSWF的第二个参数，不能忘写了。还有就是请求地址参数的问题，这里我们是方便测试就没有传递参数，而实际开发不可避免传递参数。参数传递时在请求地址后面按普通形式书写即可，只是&这个连接符需要转义，写成%26，其他就没有什么了。 
    我们得到的结果就是这样的，这是很普通的折线图。但是不比JFreeChart的差哦。 
使用Open Flash Chart(OFC)制作图表(Struts2处理) 
    同时在控制台我们得到jofc2为我们生成的JSON文本。 
Js代码  使用Open Flash Chart(OFC)制作图表(Struts2处理)
  1. {"is_thousand_separator_disabled":0,"is_decimal_separator_comma":0,"title":{"tex  
  2. t":"用户浏览器使用量分布"},"y_axis":{"min":0,"steps":10,"max":200},"x_axis":{"la  
  3. bels":{"labels":[{"text":"Safari"},{"text":"MSIE6X"},{"text":"MSIE7X"},{"text":"  
  4. MSIE8X"},{"text":"Firefox"},{"text":"Chrome"},{"text":"Opera"},{"text":"Maxthon"  
  5. },{"text":"Other"}]}},"num_decimals":2,"is_fixed_num_decimals_forced":0,"element  
  6. s":[{"font-size":10,"text":"使用者数量","type":"line","values":[6,2,63,168,1,10,  
  7. 1,0,0],"colour":"#6666FF"}]}  

    下面我们做柱状图，做个个性点的，用sketch类型。 
Java代码  使用Open Flash Chart(OFC)制作图表(Struts2处理)
  1. //Sketch型柱状图设置  
  2. SketchBarChart sketchChart = new SketchBarChart();  
  3. sketchChart.setColour("#6666FF");  
  4. sketchChart.addValues(dataSet);  
  5. sketchChart.setText("使用者数量");  
  6. //图表设置  
  7. Chart chart = new Chart("用户浏览器使用量分布");  
  8. chart.setXAxis(labels);  
  9. chart.setYAxis(range);  
  10. chart.addElements(sketchChart);  

    这样我们就得到了下面的显示效果，是不是很卡通，哈哈。 
使用Open Flash Chart(OFC)制作图表(Struts2处理) 
    需要注意jofc2将sketch风格的柱状图单独写成了一个类，而使用普通风格的柱状图时不时这么进行的。 
Java代码  使用Open Flash Chart(OFC)制作图表(Struts2处理)
  1. //柱状图Bar的集合  
  2. List<Bar> barList=new ArrayList<Bar>();  
  3. for (int i = 0; i < browserList.size(); i++) {  
  4.     Map map = (Map) browserList.get(i);  
  5.     //填充Bar，并给出提示  
  6.     barList.add(new Bar((Integer) map.get("statCount")).setTooltip("#val#次"));  
  7.     //填充y轴  
  8.     xLabel.add(new Label((String) map.get("statVar")));  
  9. }  
  10. //柱状图设置  
  11. BarChart barChart=new BarChart(BarChart.Style.GLASS);  
  12. barChart.addBars(barList);  
  13. barChart.setColour("#6666FF");  
  14. barChart.setText("使用者数量");  
  15. //图表设置  
  16. Chart chart = new Chart("用户浏览器使用量分布");  
  17. chart.setXAxis(labels);  
  18. chart.setYAxis(range);  
  19. chart.addElements(barChart);  

    我们得到如下的柱状图。 
使用Open Flash Chart(OFC)制作图表(Struts2处理) 
   最后一种是饼状图，下面我们来画饼。 
Java代码  使用Open Flash Chart(OFC)制作图表(Struts2处理)
  1. //饼状图  
  2. PieChart pieChart = new PieChart();  
  3. for (int i = 0; i < browserList.size(); i++) {  
  4.     Map map = (Map) browserList.get(i);  
  5.     //填充x轴  
  6.     dataSet.add((Integer) map.get("statCount"));  
  7.     //饼状图添加块  
  8.     pieChart.addSlice((Integer) map.get("statCount"), (String) map.get("statVar"));  
  9. }  
  10. //饼状图设置  
  11. pieChart.setColours("#d01f3c", "#356aa0", "#C79810");  
  12. pieChart.setText("使用者数量");  
  13. pieChart.setRadius(180); //饼图的半径  
  14. pieChart.setTooltip("#val# / #total#<br>#percent#");  
  15. //图表设置  
  16. Chart chart = new Chart("用户浏览器使用量分布");  
  17. chart.setXAxis(labels);  
  18. chart.setYAxis(range);  
  19. chart.addElements(pieChart);  

    生成的饼状图如下： 
使用Open Flash Chart(OFC)制作图表(Struts2处理) 
    OFC接收一个JSON格式的文本用来填充Flash，Flash解析这段文本就生成了漂亮的图表。当然OFC的设置还有很多，可以做出非常炫的效果，这里就不深入研究了，当然就是set一些属性罢了。最后我们还是看一下JFreeChart的吧。 
使用Open Flash Chart(OFC)制作图表(Struts2处理) 
    希望对使用者有用，欢迎交流探讨更深入内容。

相关推荐