`
Donald_Draper
  • 浏览: 981227 次
社区版块
存档分类
最新评论

FusionChartsFree在JSP中的用法

    博客分类:
  • HTML
阅读更多
FusionCharts简单教程(四)-----基本数字格式:http://www.cnblogs.com/chenssy/p/3268848.html
FusionCharts X轴显示方式:http://wangxiao5530.iteye.com/blog/1454200
FusionCharts属性:http://www.cnblogs.com/jifeng/archive/2012/05/28/2521306.html
1.下载FusionChartsFree
2.将FusionChartsFree/Charts/*.swf 文件copy到WEB文件加下
3.新建JSP页面,引入如下片段
<jsp:include page="../../FusionChartsHTMLRenderer.jsp" flush="true">
<jsp:param name="chartSWF"
value="static/FusionCharts/Column3D.swf" />
<jsp:param name="strURL" value="" />
<jsp:param name="strXML" value="${strXML }" />
<jsp:param name="chartId" value="myNext" />
<jsp:param name="chartWidth" value="500" />
<jsp:param name="chartHeight" value="300" />
<jsp:param name="debugMode" value="false" />
</jsp:include>

具体实例:
<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>
<%
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>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
  </head>
  <body>
    <jsp:include
			page="../FusionChartsHTMLRenderer.jsp" flush="true">
		<jsp:param name="chartSWF"
			value="static/FusionCharts/Column3D.swf" />
		<jsp:param name="strURL" value="" />
		<jsp:param name="strXML" value="${strXML}" />
		<jsp:param name="chartId" value="myNext" />
		<jsp:param name="chartWidth" value="500" />
		<jsp:param name="chartHeight" value="300" />
		<jsp:param name="debugMode" value="false" />
	</jsp:include>
  </body>
</html>


FusionChartsHTMLRenderer.jsp 在FusionChartsFree/Code/Jsp/Includes/文件夹下,添加到web目录下,
3.在Controller中组织str
XML,如下:
String strXML=<graph caption='Monthly Unit Sales' xAxisName='Month' yAxisName='Units' decimalPrecision='0' formatNumberScale='0'>
    <set name='Jan' value='462' color='AFD8F8' />
    <set name='Feb' value='857' color='F6BD0F' />
    <set name='Mar' value='671' color='8BBA00' />
    <set name='Apr' value='494' color='FF8E46' />
    <set name='May' value='761' color='008E8E' />
    <set name='Jun' value='960' color='D64646' />
    <set name='Jul' value='629' color='8E468E' />
    <set name='Aug' value='622' color='588526' />
    <set name='Sep' value='376' color='B3AA00' />
    <set name='Oct' value='494' color='008ED6' />
    <set name='Nov' value='761' color='9D080D' />
    <set name='Dec' value='960' color='A186BE' />
</graph>
其中decimalPrecision='0'为精度, formatNumberScale='0'数据格式。
@Controller
@RequestMapping(value = "/test")
public class testController extends BaseController {
	Log log = LogFactory.getLog(testController.class);
	@RequestMapping(value = "/charts")
	@SystemNormalLog(description = "测试fusioncharts")
	public String testFusionCharts(HttpServletRequest request,HttpServletResponse response,Model model) {
		log.info("====Start");
		String strXML="<graph caption='Monthly Unit Sales' xAxisName='Month'" +
				" yAxisName='Units' decimalPrecision='0' formatNumberScale='0'>"+
	    "<set name='Jan' value='462' color='AFD8F8' />"+
	    "<set name='Feb' value='857' color='F6BD0F' />"+
	    "<set name='Mar' value='671' color='8BBA00' />"+
	    "<set name='Apr' value='494' color='FF8E46' />"+
	    "<set name='May' value='761' color='008E8E' />"+
	    "<set name='Jun' value='960' color='D64646' />"+
	    "<set name='Jul' value='629' color='8E468E' />"+
	    "<set name='Aug' value='622' color='588526' />"+
	    "<set name='Sep' value='376' color='B3AA00' />"+
	    "<set name='Oct' value='494' color='008ED6' />"+
	    "<set name='Nov' value='761' color='9D080D' />"+
	    "<set name='Dec' value='960' color='A186BE' />"+
	"</graph>";
		model.addAttribute("strXML", strXML);
		return "test/charts";
	}
}

4.启动web访问地址host:8080/webName/test/charts,可以看到如下3D柱状图


  • 大小: 44.3 KB
分享到:
评论

相关推荐

    FusionChartsFree

    在"Ext+FusionChartsFree+Jsp"的描述中,"Ext"可能是指Ext JS,这是一个流行的JavaScript框架,用于构建富互联网应用程序(RIA)。结合FusionCharts,这个项目可能是关于如何在基于Ext JS的JSP应用中集成...

    FusionCharts Free版

    通过这个压缩包,你可以了解FusionCharts的基本使用方法,包括如何在HTML页面中引入库,如何配置图表选项,如何绑定数据,以及如何处理用户交互事件。同时,通过阅读文档,你可以更深入地理解FusionCharts的高级特性...

    FusionChartsFree示例工程加FCF教程

    在本文中,我们将深入探讨**FusionCharts Free** 的核心特性、安装步骤、基本用法、图表类型,以及如何通过提供的示例工程和教程来提升您的数据可视化技能。 ### FusionCharts Free的核心特性 1. **丰富的图表类型...

    一个用FusionChartsFree制作的flash报表

    在“一个用FusionChartsFree制作的flash报表”项目中,我们可以探讨以下几个关键知识点: 1. **FusionCharts Free介绍**:FusionCharts Free是FusionCharts系列的一个免费版本,它提供了30多种不同类型的图表,包括...

    JSP FusionCharts Free显示图表 具体实现

    本文将详细介绍如何在JSP页面中使用FusionCharts Free版本来显示图表。 首先,要使用FusionCharts,你需要从官方网站下载FusionCharts Free。官方网站提供了多种图表类型供用户选择,而且完全免费。下载完成后,你...

    fusioncharts

    #### 六、使用方法详解 ##### 1. 设置SWF文件 为了在HTML页面中显示图表,首先需要设置SWF文件。这通常涉及到通过`&lt;object&gt;`或`&lt;embed&gt;`标签将SWF文件嵌入到HTML页面中。 ##### 2. 创建XML数据文档 FusionCharts...

    FusionCharts帮助文档

    开发指南中对API的使用方法有详尽的说明,并且通过实例代码展示如何调用API实现特定功能。 此外,FusionCharts的事件处理机制也是其强大之处。通过监听和响应用户的交互行为,开发者可以实现更高级的功能,如图表的...

    FunsionCharts_free 使用手册

    #### 四、使用方法 1. **嵌入图表**:通过HTML或JavaScript将图表嵌入到网页中。 2. **配置属性**:通过XML或JavaScript配置图表的颜色、样式等属性。 3. **数据绑定**:可以动态地从数据库或其他数据源获取数据,...

    FusionCharts_free API

    ### FusionCharts Free API 知识点详解 #### 一、概述 **FusionCharts Free** 是由 InfoSoft Global 公司开发的一...通过上述详细介绍,希望能够帮助读者更好地理解和掌握 FusionCharts Free 的使用方法及其应用场景。

    FusionCharts免费版+说明文档(英文版)

    FusionCharts是一款强大的数据可视化工具,特别适合于创建交互式的图表和报表,广泛应用于Web应用程序中,以提供...通过学习和掌握其使用方法,开发者可以有效地提升数据报表的呈现效果,让数据讲述更有力量的故事。

Global site tag (gtag.js) - Google Analytics