锁定老帖子 主题:FusionCharts生成报表应用
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
---|---|
作者 | 正文 |
发表时间:2010-08-16
最后修改:2010-09-09
1.需要组装要展示的数据,至于如何怎样去设计数据模型,看你要展示的图形和需要的数据就行了。来个简单的。 实体类,只有两个属性,也可以使用Bean里面的实体类,无所谓了。 package com.golden.entity; public class Doughnut { public Doughnut() { } private String label; private int value; public String getLabel() { return label; } public void setLabel(String label) { this.label = label; } public int getValue() { return value; } public void setValue(int value) { this.value = value; } public Doughnut(String label, int value) { super(); this.label = label; this.value = value; } }
2.做一个请求到Servlet,简单使用,也可以请求到Action,无所谓。该Servlet从后来得到数据,然后设置到该请求环境中。 package com.golden.servlet; import java.io.IOException; import java.util.ArrayList; import java.util.List; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import com.golden.entity.Doughnut; @SuppressWarnings("serial") public class FirstServlet extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { List<Doughnut> list = new ArrayList<Doughnut>(); Doughnut d1 = new Doughnut("France", 17); Doughnut d2 = new Doughnut("India", 12); Doughnut d3 = new Doughnut("Brazil", 18); Doughnut d4 = new Doughnut("USA", 8); Doughnut d5 = new Doughnut("Australia", 10); Doughnut d6 = new Doughnut("Japan", 7); Doughnut d7 = new Doughnut("England", 5); Doughnut d8 = new Doughnut("Nigeria", 12); Doughnut d9 = new Doughnut("Italy", 8); Doughnut d10 = new Doughnut("China", 10); Doughnut d11 = new Doughnut("Canada", 19); Doughnut d12 = new Doughnut("Germany", 15); list.add(d1); list.add(d2); list.add(d3); list.add(d4); list.add(d5); list.add(d6); list.add(d7); list.add(d8); list.add(d9); list.add(d10); list.add(d11); list.add(d12); request.getSession().setAttribute("list", list); request.getRequestDispatcher("/show.jsp").forward(request, response); } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); } }
3.配置,例如需要的Swf文件和JS文件,因为需要JSTL,所以要引入包,页面引进标签,一些低级的工作,赶紧搞定。 4.页面加载时初始化方法解析数据生成XML文件的字符串,然后设置给SWF,他就显示数据了,搞定。 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@page import="com.golden.entity.Doughnut"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>FusionCharts报表生成页面</title> <script type="text/javascript" src="<%=request.getContextPath() %>/js/FusionCharts.js"></script> <script type="text/javascript"> var majorXml; //var list; function init(){ initXml(); } function initXml(){ majorXml="<chart palette='2' showBorder='1'>"; majorXml += "<c:forEach var ='item' items='${list}'><set label='${item.label}' value='${item.value}'/></c:forEach>"; majorXml+="</chart>"; showDou3D(); } function showDou3D(){ var myChart=new FusionCharts("<%=request.getContextPath()%>/FusionCharts/Doughnut3D.swf", "ChartId", "600", "300", "0", "0"); myChart.setDataXML(majorXml); myChart.render("majorbus"); } </script> </head> <body onload="init()"> <center> <div style="" id="majorbus"> </div> </center> </body> </html>
5.不知道文件在哪里不要紧,在Webroot下建立js和FusionCharts文件夹,分别把附近弄进去,没有JSTL的LIB里有。 声明:ITeye文章版权属于作者,受法律保护。没有作者书面许可不得转载。
推荐链接
|
|
返回顶楼 | |
发表时间:2010-08-18
一个建议:
xml数据在server端生成,页面只负责接收xml和展示数据,这样效率更高更可靠; 将javaBean生成xml数据的工具很多,推荐用ThoughtWorks的xStream。 |
|
返回顶楼 | |
发表时间:2010-08-18
你的建议不错,后台组装效率上可能会高一些!
|
|
返回顶楼 | |
发表时间:2010-08-18
还有一种,可以直接构建xml形式的字符串,可以在后台用StringBuffer来做
|
|
返回顶楼 | |
发表时间:2010-08-18
最近也在做一个B/S报表查询平台,正好也是使用FusionCharts工具,但不知道如何将FusionChart建模!
楼主的代码是否只能显示一种Doughnut风格的图标,如果需要换成柱状图等的,似乎需要在写一个Servlet?? |
|
返回顶楼 | |
发表时间:2010-08-18
自己简单造一下轮子,把FusionCharts的各类图表封装成java api,调用直接输出xml数据,更方便,
下面是调用哪个api的代码: action: /** ***构造数据集,注:这里需要使用LinkedHashMap图表顺序才能与数据顺序保持一致******* */ Map data = new LinkedHashMap(); data.put("一月", "231"); data.put("二月", "129"); data.put("三月", "241"); data.put("四月", "164"); List dataList = new ArrayList(); dataList.add(data); /** ***创建一个单系列图表对象,构造方法参数为图表标题****** */ SingleSeriesChart sChart = new SingleSeriesChart("FusionChart测试"); /** ***设置图表链接 * */ sChart.setAllSetLink("javascript:alert(\"123456\")"); // 可以通过Index取得每个set对象: sChart.getChartSet(0); /** ***设置图表的label,参数为一个字符数组,不设置的话默认取map的key值**** */ sChart.setSetLabels("1月,2月,3月,4月".split(",")); /** ********给图表设置list数据集合*********** */ sChart.setDefaultList(dataList); sChart.setShownames("1"); sChart.setShowLabels("0"); /** ***给图表设置每个数据单元设置颜色,不设的话默认随即生成颜色**** */ sChart.getChartSet(0).setColor("CCCCCC"); sChart.getChartSet(1).setColor("4B0082"); sChart.getChartSet(2).setColor("48D1CC"); sChart.getChartSet(3).setColor("8E8E38"); sChart.setAnimation("1"); // PrintWriter out = response.getWriter(); //如果出现乱码,可能需要中文转码 out.print(new String(sChart.getXML().getBytes("GBK"), "ISO8859-1")); out.close(); return null; jsp: //FusionCharts测试 var url = escape("totalAnalyse.do?reqCode=chartTest"); function loadChart(){ var chart = new FusionCharts("<%=request.getContextPath()%>/FusionCharts/swf/charts/Column3D.swf", "ChartId1", "400", "300").setDataURL(url).render("chartdiv10"); } loadChart(); 效果图在下面的文件里 |
|
返回顶楼 | |
发表时间:2010-08-18
这样更规范一些
|
|
返回顶楼 | |
发表时间:2010-08-18
tangzililiang 写道 这样更规范一些 能粘贴源代码借鉴下吗? |
|
返回顶楼 | |
发表时间:2010-08-18
|
|
返回顶楼 | |
发表时间:2010-08-18
不知道现在的版本有没有解决导出的问题
FC的效果还是非常好的,但是因为是flash的,不支持导出 不知道目前的版本还带这个功能了呢? |
|
返回顶楼 | |