1.先来看看要进行表现的页面：myChart.jsp
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Fusion Chart Test</title>
<link rel="stylesheet" href="../Contents/Style.css" type="text/css" />
<script src="../js/jquery.js" type="text/javascript"></script>
<script language="JavaScript" src="../js/FusionCharts.js"></script>
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Fusion Chart Test</title>
<link rel="stylesheet" href="../Contents/Style.css" type="text/css" />
<script src="../js/jquery.js" type="text/javascript"></script>
<script language="JavaScript" src="../js/FusionCharts.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// do something here
$.ajax({
type:"POST",
url:"../test", //请求路径 请求Action(继承DispatcherAction)中的login方法
success: function(responseText){
// alert(responseText);
//根据你所需要的图形类型选择不同的swf，如3d柱状图为FCF_Column3D.swf，2d饼状图为FCF_Pie2D.swf
var chart = new FusionCharts("../Charts/FCF_Line.swf", "ChartId", "600", "350");
chart.setDataXML(responseText);
chart.render("chartdiv");
}
});
});
</script>
</head>
<body bgcolor="#ffffff">
<div align="center">Fusion Charts Free</div>
<div id="chartdiv" align="center"></div>
</body>
</html>
$(document).ready(function() {
// do something here
$.ajax({
type:"POST",
url:"../test", //请求路径 请求Action(继承DispatcherAction)中的login方法
success: function(responseText){
// alert(responseText);
//根据你所需要的图形类型选择不同的swf，如3d柱状图为FCF_Column3D.swf，2d饼状图为FCF_Pie2D.swf
var chart = new FusionCharts("../Charts/FCF_Line.swf", "ChartId", "600", "350");
chart.setDataXML(responseText);
chart.render("chartdiv");
}
});
});
</script>
</head>
<body bgcolor="#ffffff">
<div align="center">Fusion Charts Free</div>
<div id="chartdiv" align="center"></div>
</body>
</html>
注：以上需要引入需要的js和css，如jquery.js,FusionCharts.js,style.css,Charts文件夹，这其中的大部分都可以在下载的FusionChartsFree中找到。如果只是做简单的从XML中读取数据，那么很简单，参看其中的相关例子即可。
2.来看一下后台返回的数据的格式：Servlet.java
package servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* @Title: Servlet.java
* @Package servlet
* @Description:
* @author lzh
* @date Dec 2, 2011 2:44:51 PM
* @version V1.0
*/
public class Servlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("GBK");
StringBuffer sb=new StringBuffer();
sb.append("<graph caption='Monthly Unit Sales' xAxisName='Month' yAxisName='Units' showNames='1' decimalPrecision='2' formatNumberScale='0'>");
sb.append("<set name='一月' value='444' color='CCFFFF' hoverText='一月,444' link='http://www.baidu.com'/>");
sb.append("<set name='二月' value='555' color='F6BD0F'/>");
sb.append("<set name='三月' value='671' color='8BBA00' />");
sb.append("<set name='四月' value='494' color='FF8E46'/>");
sb.append("<set name='五月' value='761' color='008E8E'/>");
sb.append("<set name='六月' value='960' color='D64646'/>");
sb.append("<set name='七月' value='629' color='8E468E'/>");
sb.append("<set name='八月' value='622' color='588526'/>");
sb.append("<set name='九月' value='376' color='B3AA00'/>");
sb.append("<set name='十月' value='494' color='008ED6'/>");
sb.append("<set name='十一月' value='761' color='9D080D'/>");
sb.append("<set name='十二月' value='960' color='A186BE'/>");
sb.append("</graph>");
response.setCharacterEncoding("UTF-8");
System.out.println(sb.toString());
response.getWriter().print(sb.toString());
}
}
* @Title: Servlet.java
* @Package servlet
* @Description:
* @author lzh
* @date Dec 2, 2011 2:44:51 PM
* @version V1.0
*/
public class Servlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("GBK");
StringBuffer sb=new StringBuffer();
sb.append("<graph caption='Monthly Unit Sales' xAxisName='Month' yAxisName='Units' showNames='1' decimalPrecision='2' formatNumberScale='0'>");
sb.append("<set name='一月' value='444' color='CCFFFF' hoverText='一月,444' link='http://www.baidu.com'/>");
sb.append("<set name='二月' value='555' color='F6BD0F'/>");
sb.append("<set name='三月' value='671' color='8BBA00' />");
sb.append("<set name='四月' value='494' color='FF8E46'/>");
sb.append("<set name='五月' value='761' color='008E8E'/>");
sb.append("<set name='六月' value='960' color='D64646'/>");
sb.append("<set name='七月' value='629' color='8E468E'/>");
sb.append("<set name='八月' value='622' color='588526'/>");
sb.append("<set name='九月' value='376' color='B3AA00'/>");
sb.append("<set name='十月' value='494' color='008ED6'/>");
sb.append("<set name='十一月' value='761' color='9D080D'/>");
sb.append("<set name='十二月' value='960' color='A186BE'/>");
sb.append("</graph>");
response.setCharacterEncoding("UTF-8");
System.out.println(sb.toString());
response.getWriter().print(sb.toString());
}
}
3.如果只是读xml文件，那么在表现页面myChart中，将responseText替换为相应的xml文件即可。xml的格式如下：
<graph caption='' subcaption='' hovercapbg='FFECAA' hovercapborder='F47E00' formatNumberScale='0' decimalPrecision='0' showvalues='0' numdivlines='3' numVdivlines='0' yaxisminvalue='1000' yaxismaxvalue='1800' rotateNames='0'>
<categories >
<category name='2011-08-17 17：20' />
<category name='2011-08-17 17：25' />
<category name='2011-08-17 17：30' />
<category name='2011-08-17 17：35' />
<category name='2011-08-17 17：40' />
<category name='2011-08-17 17：45' />
<category name='2011-08-17 17：50' />
<categories >
<category name='2011-08-17 17：20' />
<category name='2011-08-17 17：25' />
<category name='2011-08-17 17：30' />
<category name='2011-08-17 17：35' />
<category name='2011-08-17 17：40' />
<category name='2011-08-17 17：45' />
<category name='2011-08-17 17：50' />
</categories>
<dataset seriesName='温度' color='1D8BD1' anchorBorderColor='1D8BD1' anchorBgColor='1D8BD1'>
<set value='1327' />
<set value='1826' />
<set value='1699' />
<set value='1511' />
<set value='1904' />
<set value='1957' />
<set value='1296' />
</dataset>
<dataset seriesName='温度' color='1D8BD1' anchorBorderColor='1D8BD1' anchorBgColor='1D8BD1'>
<set value='1327' />
<set value='1826' />
<set value='1699' />
<set value='1511' />
<set value='1904' />
<set value='1957' />
<set value='1296' />
</dataset>
<dataset seriesName='湿度' color='F1683C' anchorBorderColor='F1683C' anchorBgColor='F1683C'>
<set value='2042' />
<set value='3210' />
<set value='2994' />
<set value='3115' />
<set value='2844' />
<set value='3576' />
<set value='1862' />
</dataset>
<set value='2042' />
<set value='3210' />
<set value='2994' />
<set value='3115' />
<set value='2844' />
<set value='3576' />
<set value='1862' />
</dataset>
<dataset seriesName='降水量' color='2AD62A' anchorBorderColor='2AD62A' anchorBgColor='2AD62A'>
<set value='850' />
<set value='1010' />
<set value='1116' />
<set value='1234' />
<set value='1210' />
<set value='1054' />
<set value='802' />
</dataset>
<set value='850' />
<set value='1010' />
<set value='1116' />
<set value='1234' />
<set value='1210' />
<set value='1054' />
<set value='802' />
</dataset>
<dataset seriesName='能见度' color='DBDC25' anchorBorderColor='DBDC25' anchorBgColor='DBDC25'>
<set value='541' />
<set value='781' />
<set value='920' />
<set value='754' />
<set value='840' />
<set value='893' />
<set value='451' />
</dataset>
<set value='541' />
<set value='781' />
<set value='920' />
<set value='754' />
<set value='840' />
<set value='893' />
<set value='451' />
</dataset>
</graph>
相关推荐
1. `详细文档.doc`：这是一个Microsoft Word文档，详细介绍了FusionCharts Free的使用方法、API接口、配置选项以及如何创建饼状图和折线图的步骤。文档可能包含了代码示例和截图，便于开发者理解和实践。 2. `详细...
实例中的“FusionChartsFree”可能包含示例代码、文档和资源，帮助你快速上手。通常，这样的例子会涵盖如何初始化图表，如何构建数据源，以及如何处理用户交互，如点击图表时触发事件。 在实际开发中，你可能还会...
FusionCharts Free是一款功能强大的JavaScript图表库，它提供了丰富的2D和3D图表类型，包括柱状图、饼状图和折线图等，用于创建交互式的数据可视化解决方案。这款免费版本的FusionCharts能够帮助开发者在网页上轻松...
这款开源工具允许开发者轻松地在网页上绘制出丰富多彩的图表，如折线图、柱状图、饼图等，从而提升数据展示的吸引力和可读性。 首先，FusionCharts Free的核心特性在于其易用性。只需简单的HTML和JavaScript代码，...
**柱状图** 则是显示数据比较和趋势的理想选择，FusionCharts Free支持单轴和双轴柱状图，以及堆叠和百分比堆叠柱状图等多种形式。通过不同的颜色和长度，柱状图可以直观地展现数据差异和变化。 **甘特图** 通常...
2. **创建图表对象**：使用JavaScript创建FusionCharts对象，需要指定图表类型（如饼图、柱状图、线图等）、宽度、高度以及数据源。 ```javascript var myChart = new FusionCharts("Column2D", "myChartId", ...
**FusionCharts Free** 是一款基于Flash技术的统计图表控件，它专为开发者提供了一套强大而丰富的可视化工具，用于创建吸引人的、交互式的柱状图、曲线图、饼图等多种类型的图表。这款控件在网页设计和数据可视化的...
控件支持多种图表类型的创建，包括但不限于条形图、折线图、饼图、散点图等，还支持自定义颜色、样式、动画等，以满足不同场景的需求。此外，它还提供了丰富的事件处理和交互功能，如点击图表元素触发事件、图表缩放...
描述中提到，此项目是“用FusionCharts在asp.net页面中绘制柱状图的项目文件”，这意味着它使用了.NET Framework中的ASP.NET技术来构建Web应用程序，并且这个应用的核心功能是展示柱状图表。开发者可以解压文件后...
FusionChartsFree动态报表工具，跨浏览器的flash图表组件解决方案，能够被 ASP.NET, ASP, PHP, JSP, ColdFusion, Ruby on Rails, 简单 HTML 页面甚至PPT调用，提供饼形图、扇形图、折线图、柱状图等多种报表的2D、3D...
它是一个基于Web的图表组件，能够将结构化的数据转化为易于理解的图表，如柱状图、饼图、线图、地图等。这些图表支持多种浏览器，包括IE、Firefox、Chrome、Safari和Opera，确保了跨平台兼容性。 FusionCharts Free...
这款工具能够帮助开发者轻松地在网页上展示复杂数据，提供多种图表类型，如饼图、线图、柱状图、条形图、面积图等，使得数据分析和展示更为直观易懂。 在"FusionChartsFree官方示例"中，我们可以学习到以下关键知识...
1. **Charts**：这个目录包含了各种类型的图表，如柱状图、饼图、线图、散点图等，每种图表都有多种样式和配置供用户选择，满足不同数据展示需求。 2. **Examples**：这里包含了一系列的示例代码，展示了如何使用...