用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制作的统计图形, 有水晶报表生成统计图形, 有专门制图软件制作, 也有编程语言自己制作的:这里我们用 ...
随机推荐
- Flask -- 内容管理系统
例子: # content_manager.py # 把TOPIC存在一个字典里,key为关键字,value为二维数组# TOPIC_DICT['Django'][0]为Title,TOPIC_DIC ...
- 转：jmeter之线程组
虽然有三个添加线程组的选项,名字不一样, 创建之后,其界面是完全一样的.之前的版本只有一个线程组的名字.现在多一个setUp theread Group 与terDown Thread Group 1 ...
- hdu_5734_Acperience
题目连接:hdu_5734_Acperience 多校的题我还是贴官方题解的好,方便快捷,省事!! #include<cstdio> #include<cmath> #defi ...
- Entity Framework技巧系列之三 - Tip 9 – 12
提示9. 怎样直接删除一个对象而无需检索它 问题 最常见的删除Entity Framework中实体的方式是将你要删除的实体传入Context中并像如下这样删除: 1 // 按ID查找一个类别 2 / ...
- DLL调试方法
1.已经做好的dll不能设置:你可以用AfxMessageBox把信息打印出来.2.哪个地方调用的函数 把DLL重新编译一次 在把DLL放到工程里 从新添加一下 然后在你工程调用DLL内容的地方设置断 ...
- 给table加边框的两种方法
<!DOCTYPE html><html><head><style>.a { border-spacing: 1px; background-color ...
- postgres-xl 集体搭建
pgxl 集群搭建 一 预备 1 下载安装解压源码 /opt/ curl -O http://files.postgres-xl.org/postgres-xl95r1beta1.tar.gz tar ...
- 07-09 07:28:38.350: E/AndroidRuntime(1437): Caused by: java.lang.ClassNotFoundException: Didn't find class "com.example.googleplay.ui.activity.MainActivity" on path: DexPathList[[zip file "/data/app/c
一运行,加载mainActivity就报错 布局文件乱写一通,然后急着运行,报莫名其妙的错误: 07-09 07:28:38.350: E/AndroidRuntime(1437): Caused b ...
- jQuery实现DIV拖动
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- c++判断一个字符串是否是数字
bool isNum(const string& str) { bool bRet = false; bool point = false; ) { return bRet; } ]) &am ...