【FusionCharts学习-2】第一个FusionCharts程序

时间：2015-05-22 12:51:59 阅读：152 评论：0 收藏：0 [点我收藏+]

获取资源

到官网：http://www.fusioncharts.com/download/ 获取FusionCharts文件；

目录结构：

js目录下的文件：

创建项目

1. 项目名称：FusionChartsTest；

2. 在webroot下创建文件夹：fusionCharts；

3. 将下载的js目录下的所有文件拷贝到刚刚创建的FusionCharts文件夹下；

整个的目录结构如下，至此，FusionCharts已经导入到了我们的工程中。

编写jsp界面

编写index.jsp界面，内容如下：

<%@ page language="java" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
	response.setHeader("Pragma", "no-cache");
	response.setHeader("Cache-Control", "no-cache");
	response.setDateHeader("Expires", 0);
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>My first FusionCharts</title>
<script type="text/javascript" src="<%=basePath%>fusionCharts/fusioncharts.js"></script>
<script type="text/javascript" src="<%=basePath%>fusioncharts/themes/fusioncharts.theme.fint.js"></script>
<script type="text/javascript">
	FusionCharts.ready(function() {
		var revenueChart = new FusionCharts({
			"type" : "column2d",
			"renderAt" : "chartContainer",
			"width" : "500",
			"height" : "300",
			"dataFormat" : "json",
			"dataSource" : {
				"chart" : {
					"caption" : "Monthly revenue for last year-总标题",
					"subCaption" : "Harry‘s SuperMart-子标题",
					"xAxisName" : "Month-x轴名称",
					"yAxisName" : "Revenues (In USD)-y轴名称",
					"theme" : "fint"
				},
				"data" : [ {
					"label" : "Jan",
					"value" : "420000"
				}, {
					"label" : "Feb",
					"value" : "810000"
				}, {
					"label" : "Mar",
					"value" : "720000"
				}, {
					"label" : "Apr",
					"value" : "550000"
				}, {
					"label" : "May",
					"value" : "910000"
				}, {
					"label" : "Jun",
					"value" : "510000"
				}, {
					"label" : "Jul",
					"value" : "680000"
				}, {
					"label" : "Aug",
					"value" : "620000"
				}, {
					"label" : "Sep",
					"value" : "610000"
				}, {
					"label" : "Oct",
					"value" : "490000"
				}, {
					"label" : "Nov",
					"value" : "900000"
				}, {
					"label" : "Dec",
					"value" : "730000"
				} ]
			}
		});
		revenueChart.render();
	})
</script>
</head>
<body>
	<div id="chartContainer">FusionCharts XT will load here!</div>
</body>
</html>

问题说明：

直接安装官网上的方式引入js文件，程序代码如下：

<script type="text/javascript" src="fusioncharts/fusioncharts.js"></script>
<script type="text/javascript" src="fusioncharts/themes/fusioncharts.theme.fint.js"></script>

运行时，会发现出不来FusionCharts图表，通过firebug调试发现，项目没有成功引入两个js文件，所以需要通过下面的方式引入js文件：

String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";

<script type="text/javascript" src="<%=basePath%>fusionCharts/fusioncharts.js"></script>
<script type="text/javascript" src="<%=basePath%>fusioncharts/themes/fusioncharts.theme.fint.js"></script>

运行结果

在tomcat下运行该项目，然后在浏览器中输入：http://localhost:8080/FusionChartsTest/index.jsp ；

将出现如下界面：

来自为知笔记(Wiz)

附件列表

【FusionCharts学习-2】第一个FusionCharts程序

原文：http://www.cnblogs.com/ssslinppp/p/4521903.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)