用FusionChartsFree做饼状图、柱状图、折线图的实例
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>
$(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中读取数据，那么很简单，参看其中的相关例子即可。
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());
}
}
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' />
<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>
<set value='2042' />
<set value='3210' />
<set value='2994' />
<set value='3115' />
<set value='2844' />
<set value='3576' />
<set value='1862' />
</dataset>
<set value='850' />
<set value='1010' />
<set value='1116' />
<set value='1234' />
<set value='1210' />
<set value='1054' />
<set value='802' />
</dataset>
<set value='541' />
<set value='781' />
<set value='920' />
<set value='754' />
<set value='840' />
<set value='893' />
<set value='451' />
</dataset>
</graph>
用FusionChartsFree做饼状图、柱状图、折线图的实例的更多相关文章
- seaborn分类数据可视化：散点图|箱型图|小提琴图|lv图|柱状图|折线图
一.散点图stripplot( ) 与swarmplot() 1.分类散点图stripplot( ) 用法stripplot(x=None, y=None, hue=None, data=None, ...
- 前端数据统计用做Bootstrap的一些柱状图、饼状图和折线图案例
Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. Bootstrap ...
- WPF、Silverlight项目中使用柱状图、饼状图、折线图
在开发的过程中,可能会遇到柱状图.饼状图.折线图来更好的显示数据,最近整理了一下,遂放出来望需要的朋友可以参考.本文仅仅是简单显示,如需复杂显示效果请参考官网代码示例.----本文代码使用WPF,Si ...
- ComponentOne的C1Chart做饼状图怎么显示其百分比
问题:ComponentOne的C1Chart做饼状图怎么显示每部分的百分比 描述: 我用C1Chart做饼状图的时候,不知道怎么显示其百分比在对应的区域上,求解. 目前做的效果(附加代码所生成的饼状 ...
- php 生成饼状图，折线图，条形图 通用类 2
生成饼状图,折线图,条形图通用的php类,这里使用的是国外的 HighCharts,前台页面别忘了调用HighCahrt js HighCharts中文网站 http://www.hcharts. ...
- php 生成饼状图，折线图，条形图 通用类
生成饼状图,折线图,条形图通用的php类,这里使用的是百度 Echart. Echart 官方网站 http://echarts.baidu.com/ <?php class Echarts ...
- Excel柱状图折线图组合怎么做 Excel百分比趋势图制作教程
Excel柱状图折线图组合怎么做 Excel百分比趋势图制作教程 用excel作图时候经常会碰到做柱状图和折线图组合,这样的图一般难在折线图的数据很小,是百分比趋势图,所以经常相对前面主数据太小了,在 ...
- 简单excel饼状图怎么做，bi工具怎么做饼状图
饼状图是为了在一个整体体现个体所占的比例,比如一块蛋糕每人各分多大份.了解了饼状图的含义,就来学习饼状图怎么做吧. 首先,我们准备excel表格饼状图的初始数据 然后选择excel表格上方的插入,选择 ...
- C# 绘制统计图(柱状图, 折线图, 扇形图)【转载】
统计图形种类繁多, 有柱状图, 折线图, 扇形图等等, 而统计图形的绘制方法也有很多, 有Flash制作的统计图形, 有水晶报表生成统计图形, 有专门制图软件制作, 也有编程语言自己制作的:这里我们用 ...
随机推荐
- jsp标签简介
一.jsp标签简介 JSP标签也称之为Jsp Action(JSP动作)元素,它用于在Jsp页面中提供业务逻辑功能,避免在JSP页面中直接编写java代码,造成jsp页面难以维护. jsp的常用标签有 ...
- Android中截取当前屏幕图片
该篇文章是说明在Android手机或平板电脑中如何实现截取当前屏幕的功能,并把截取的屏幕保存到SDCard中的某个目录文件夹下面.实现的代码如下: [html] view plaincopy /* ...
- [bzoj3196][Tyvj 1730][二逼平衡树] (线段树套treap)
Description 您需要写一种数据结构(可参考题目标题),来维护一个有序数列,其中需要提供以下操作: 1.查询k在区间内的排名 2.查询区间内排名为k的值 3.修改某一位值上的数值 4.查询k在 ...
- c语言-三字符组
C 源程序源字符集在 7 位 ASCII 字符集中包含,但设置为 ISO 646-1983 固定的代码的超集. 三字符序列允许 C 程序编写使用 " 仅 ISO (国际标准组织的固定的代码. ...
- allegro 导Gerber文件
今天抽空好好整理了一下有关Allegro出Gerber文件文档,此文档在网上搜到的基础上进一步完善,把每个需要注意的地方都用红色字体框出 http://files.cnblogs.com/files/ ...
- php mysql数据库 分页与搜索
<?php/** * Created by coder meng. * User: coder meng * Date: 2016/8/29 10:27 */header("Conte ...
- Linux中seq命令的用法
用于产生从某个数到另外一个数之间的所有整数 例一: # seq 1 10 结果是1 2 3 4 5 6 7 8 9 10 例二: #!/bin/bash for i in `seq 1 10`; do ...
- .Net 读取xml
一.常规方法 1.知识介绍 //初始化一个xml对象 XmlDocument xml = new XmlDocument(); //加载xml文件 xml.Load("文件路径") ...
- MySQL数据库MyISAM和InnoDB存储引擎的比较【转载】
转自 http://www.cnblogs.com/panfeng412/archive/2011/08/16/2140364.html MySQL有多种存储引擎,MyISAM和InnoDB是其中常用 ...
- 使用SQL Server Management Studio 创建作业备份数据库
在项目中,经常需要备份数据库,如果能做到只需点个按钮(“开始备份数据库”按钮),然后什么都不管,数据库就自动备份好了,或者服务器上的数据库隔一段时间自动备份一次,那该多好啊. Sql server 的 ...