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. angular项目——小小记事本2

    一,路由的规划. 需要模拟的页面有三个:all,active,conplete. 首先,写好铺垫需要的各种东西,重要的组件的引用等—— 这里我们会将index.html设为主页,将body.html加 ...

  2. HDU 5769 Substring

    后缀数组. 然后按照排序完成之后的顺序,每个后缀统计贡献量. 统计第i个后缀的贡献的时候,如果这个后缀中没有X,贡献度为0. 有贡献的分3种情况考虑: 1.如果这个后缀height部分等于0(即与前一 ...

  3. js循环POST提交添加辅助单位

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  4. C语言-字符串文本串联

    要形成包含多个行的字符串,可以串联两个字符串. 为此,请键入正斜杠,然后按 return 键. 反斜杠导致编译器忽略以下换行符. 例如,字符串     "Long strings can b ...

  5. 9.Java主要有那几种文件类型?各自的作用是什么?

    java类源代码.jsp页面.class编译后的类文件.xml一般是配置文件当然也可以用来传数据时候用.properties这也是配置文件.数据文件.  

  6. js实现td排序及分组分类

    如题 <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o ...

  7. 前台改变asp button控件的值,后台取值没有改变的问题

    前台: <asp:Button ID="btnEdit" Style="margin-left: 600px;" runat="server&q ...

  8. linux c中select使用技巧

    1.select函数作为定时器使用    it_value.tv_sec = 0;    it_value.tv_usec = 100000:    select(1,NULL,NULL,NULL,& ...

  9. iOS中的多线程基础

    NSThread NSThread是一个苹果封装过的,面向对象的线程对象.但是它的生命周期需要我们自己来手动管理,所以使用不是很常见,比如[NSThread currentThread],它可以获取当 ...

  10. wpf之ListBox横向显示所有ListBoxItem

    Xaml: <Window x:Class="WpfApplication6.MainWindow" xmlns="http://schemas.microsoft ...