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>
<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>
 
注：
以上需要引入需要的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;
/**  
 * @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>
<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>
<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>
<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>

</graph>

用FusionChartsFree做饼状图、柱状图、折线图的实例的更多相关文章

  1. seaborn分类数据可视化：散点图|箱型图|小提琴图|lv图|柱状图|折线图

    一.散点图stripplot( ) 与swarmplot() 1.分类散点图stripplot( ) 用法stripplot(x=None, y=None, hue=None, data=None, ...

  2. 前端数据统计用做Bootstrap的一些柱状图、饼状图和折线图案例

    Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. Bootstrap ...

  3. WPF、Silverlight项目中使用柱状图、饼状图、折线图

    在开发的过程中,可能会遇到柱状图.饼状图.折线图来更好的显示数据,最近整理了一下,遂放出来望需要的朋友可以参考.本文仅仅是简单显示,如需复杂显示效果请参考官网代码示例.----本文代码使用WPF,Si ...

  4. ComponentOne的C1Chart做饼状图怎么显示其百分比

    问题:ComponentOne的C1Chart做饼状图怎么显示每部分的百分比 描述: 我用C1Chart做饼状图的时候,不知道怎么显示其百分比在对应的区域上,求解. 目前做的效果(附加代码所生成的饼状 ...

  5. php 生成饼状图，折线图，条形图 通用类 2

    生成饼状图,折线图,条形图通用的php类,这里使用的是国外的 HighCharts,前台页面别忘了调用HighCahrt  js HighCharts中文网站  http://www.hcharts. ...

  6. php 生成饼状图，折线图，条形图 通用类

    生成饼状图,折线图,条形图通用的php类,这里使用的是百度 Echart. Echart 官方网站  http://echarts.baidu.com/ <?php class Echarts ...

  7. Excel柱状图折线图组合怎么做 Excel百分比趋势图制作教程

    Excel柱状图折线图组合怎么做 Excel百分比趋势图制作教程 用excel作图时候经常会碰到做柱状图和折线图组合,这样的图一般难在折线图的数据很小,是百分比趋势图,所以经常相对前面主数据太小了,在 ...

  8. 简单excel饼状图怎么做，bi工具怎么做饼状图

    饼状图是为了在一个整体体现个体所占的比例,比如一块蛋糕每人各分多大份.了解了饼状图的含义,就来学习饼状图怎么做吧. 首先,我们准备excel表格饼状图的初始数据 然后选择excel表格上方的插入,选择 ...

  9. C# 绘制统计图(柱状图, 折线图, 扇形图)【转载】

    统计图形种类繁多, 有柱状图, 折线图, 扇形图等等, 而统计图形的绘制方法也有很多, 有Flash制作的统计图形, 有水晶报表生成统计图形, 有专门制图软件制作, 也有编程语言自己制作的:这里我们用 ...

随机推荐

  1. POJ 2062 HDU 1528 ZOJ 2223 Card Game Cheater

    水题,感觉和田忌赛马差不多 #include<cstdio> #include<cstring> #include<cmath> #include<algor ...

  2. 在Eclipse中执行Andorid test preject提示The connection to adb is down, and a severe error has occured.解决方法

    启动android模拟器时.有时会报The connection to adb is down, and a severe error has occured.的错误.在网友说在任务管理器上把所有ad ...

  3. Oracle技术整理（转载）

  4. SOM聚类与Voroni图在验证码字符分割中的应用

    http://www.docin.com/p-1300981517.html SOM聚类与Voroni图在验证码字符分割中的应用  

  5. (转) 三个nginx配置问题的解决方案

    今天开启了nginx的error_log,发现了三个配置问题: 问题一: 2011/07/18 17:04:37 [warn] 2422#0: *171505004 an upstream respo ...

  6. SQL Server 完美SPLIT函数

    -- SQL Server Split函数   -- Author:zc_0101    -- 说明:   -- 支持分割符多字节   -- 使用方法    -- Select * FROM DBO. ...

  7. Oracle删除死锁进程的方法

    本文实例讲述了Oracle删除死锁进程的方法.分享给大家供大家参考.具体如下: 步骤1:用以下SQL查看进程列表,判断出被锁定的表 复制代码代码如下: SELECT dob.OBJECT_NAME T ...

  8. queue(),dequeue()

    这两个方法,一个是往里面添加队列,一个是执行队列 也是分静态方法和实例方法, 同样,实例方法最后调用静态方法 源码主要分析一下延迟delay方法,如何起作用的,写的有点仓促,先记录一下 在这里参照了网 ...

  9. mysql grant授权

    MySQL 赋予用户权限命令的简单格式可概括为: grant 权限 on 数据库对象 to 用户 一.grant 普通数据用户,查询.插入.更新.删除 数据库中所有表数据的权利. grant sele ...

  10. wpf计时器

    wpf应用程序间隔一段时间触发一个事件,代码如下: public MainWindow() { InitializeComponent(); DispatcherTimer timer = new D ...