关于Fusioncharts（统计图）组件

于 2016-10-19 23:42:44 发布
阅读量902 收藏 1
点赞数
分类专栏： 软件使用 fusioncharts 文章标签： fusioncharts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32528231/article/details/52865091
版权
 

FusionCharts 是使用javascript实现统计图表的js组件；其官网地址：http://www.fusioncharts.com。其早期版本FusionCharts Free 是基于flash来实现，而在2014年其脱离开flash完全使用js来实现统计图表的FusionCharts Suite XT来替代FusionCharts Free使其具有充分跨浏览器和终端的特点。到官网下载FusionCharts:


下载完后，解压压缩包“fusioncharts-suite-xt.zip”；

目录如下：


双击打开index.html页面；查看如何使用fusioncharts




查看 Setup ，了解如何安装：


安装说明写到；如果只需要统计图表，那么只要复制js文件夹中的“fusioncharts.js”和“fusioncharts.charts.js”即可。

接着；查看其demo，了解如何使用：


于此；要使用fusioncharts先将“fusioncharts.js”和“fusioncharts.charts.js”和相关主题文件复制到项目的js/fusioncharts文件夹。

JSP:

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
	
	//获取当前年份
	Calendar cal = Calendar.getInstance();
	int curYear = cal.get(Calendar.YEAR);//当前年份
	request.setAttribute("curYear", curYear);
	
	List yearList = new ArrayList();
	for(int i = curYear; i > curYear-5 ; i--){
		yearList.add(i);
	}
	request.setAttribute("yearList", yearList);
	
%>

<!DOCTYPE HTML>
<html>
  <head>
    <%@include file="/common/header.jsp"%>
    <title>年度投诉统计图</title>
  </head>
  <script type="text/javascript" src="${basePath }js/fusioncharts/fusioncharts.js"></script>
  <script type="text/javascript" src="${basePath }js/fusioncharts/fusioncharts.charts.js"></script>
  <script type="text/javascript" src="${basePath }js/fusioncharts/themes/fusioncharts.theme.fint.js"></script>
  <script type="text/javascript">
  
  //加载完dom元素后，执行
  $(document).ready(doAnnualStatistic());
  
  //根据年份统计投诉数
  function doAnnualStatistic(){
	  //1、获取年份
	  var year = $("#year option:selected").val();
	  if(year == "" || year == undefined){
		  year = "${curYear}";//默认当前年份
	  }
	  //2、根据年份统计
	  $.ajax({
		  url:"${basePath }/nsfw/complain_getAnnualStatisticData.action",
		  data:{"year":year},
		  type: "post",
		  dataType:"json",
		  success: function(data){
			  if(data != null && data != "" && data != undefined){
				  var revenueChart = new FusionCharts({
				        "type": "line",
				        "renderAt": "chartContainer",
				        "width": "600",
				        "height": "400",
				        "dataFormat": "json",
				        "dataSource":  {
				          "chart": {
				            "caption": year + " 年度投诉数统计图",
				            "xAxisName": "月  份",
				            "yAxisName": "投  诉  数",
				            "theme": "fint"
				         },
				         "data": data.chartData
				      }

				  });
				revenueChart.render();
			  } else {
				  alert("统计投诉数失败！");
			  }
		  },
		  error: function(){alert("统计投诉数失败！");}
	  });
	  
  }
 
  </script>
  <body>
  	<br>
    <div style="text-align:center;width:100%;"><s:select id="year" list="#request.yearList" οnchange="doAnnualStatistic()"></s:select></div>
    <br>
    <div id="chartContainer" style="text-align:center;width:100%;"></div>
  </body>
</html>
<span style="font-family: Arial, Helvetica, sans-serif;"><span style="font-size:18px;">action：</span></span>
package cn.itcast.nsfw.complain.action;

import java.net.URLDecoder;
import java.sql.Timestamp;
import java.util.Calendar;
import java.util.Date;
import java.util.HashMap;
import java.util.Map;

import javax.annotation.Resource;
import javax.servlet.http.HttpServletRequest;

import org.apache.commons.lang3.StringUtils;
import org.apache.commons.lang3.time.DateUtils;
import org.apache.struts2.ServletActionContext;

import cn.itcast.core.action.BaseAction;
import cn.itcast.core.util.QueryHelper;
import cn.itcast.nsfw.complain.entity.Complain;
import cn.itcast.nsfw.complain.entity.ComplainReply;
import cn.itcast.nsfw.complain.service.ComplainService;

import com.opensymphony.xwork2.ActionContext;

public class ComplainAction extends BaseAction {
	
	@Resource
	private ComplainService complainService;
	private Complain complain;
	private String startTime;
	private String endTime;
	private ComplainReply reply;
	private String strTitle;
	private String strState;
	private Map<String, Object> statisticMap;
	
	//列表
	public String listUI(){
		//加载状态集合
		ActionContext.getContext().getContextMap().put("complainStateMap", Complain.COMPLAIN_STATE_MAP);
		try {
			QueryHelper queryHelper = new QueryHelper(Complain.class, "c");
			if(StringUtils.isNotBlank(startTime)){//查询开始时间之后的投诉数据
				startTime = URLDecoder.decode(startTime, "utf-8");
				queryHelper.addCondition("c.compTime >= ?", DateUtils.parseDate(startTime+":00", "yyyy-MM-dd HH:mm:ss"));
			}
			if(StringUtils.isNotBlank(endTime)){//查询结束时间之前的投诉数据
				endTime = URLDecoder.decode(endTime, "utf-8");
				queryHelper.addCondition("c.compTime <= ?", DateUtils.parseDate(endTime+":59", "yyyy-MM-dd HH:mm:ss"));
			}
			if(complain != null){
				if(StringUtils.isNotBlank(complain.getState())){
					queryHelper.addCondition("c.state=?", complain.getState());
				}
				if(StringUtils.isNotBlank(complain.getCompTitle())){
					complain.setCompTitle(URLDecoder.decode(complain.getCompTitle(), "utf-8"));
					queryHelper.addCondition("c.compTitle like ?", "%" + complain.getCompTitle() + "%");
				}
			}
			//安装状态升序排序
			queryHelper.addOrderByProperty("c.state", QueryHelper.ORDER_BY_ASC);
			//按照投诉时间升序排序
			queryHelper.addOrderByProperty("c.compTime", QueryHelper.ORDER_BY_ASC);
			
			pageResult = complainService.getPageResult(queryHelper, getPageNo(), getPageSize());
		} catch (Exception e) {
			e.printStackTrace();
		}
		return "listUI";
	}
	
	//跳转到受理页面
	public String dealUI(){
		//加载状态集合
		ActionContext.getContext().getContextMap().put("complainStateMap", Complain.COMPLAIN_STATE_MAP);
		if(complain != null){
			strTitle = complain.getCompTitle();
			strState = complain.getState();
			complain = complainService.findObjectById(complain.getCompId());
		}
		return "dealUI";
	}
	
	public String deal(){
		if(complain != null){
			Complain tem = complainService.findObjectById(complain.getCompId());
			//1、更新投诉的状态为 已受理
			if(!Complain.COMPLAIN_STATE_DONE.equals(tem.getState())){//更新状态为 已受理
				tem.setState(Complain.COMPLAIN_STATE_DONE);
			}
			//2、保存回复信息
			if(reply != null){
				reply.setComplain(tem);
				reply.setReplyTime(new Timestamp(new Date().getTime()));
				tem.getComplainReplies().add(reply);
			}
			complainService.update(tem);
		}
		return "list";
	}
	
	//跳转到统计页面
	public String annualStatisticChartUI(){
		return "annualStatisticChartUI";
	}
	
	//根据年度获取该年度下的统计数
	public String getAnnualStatisticData(){
		//1、获取年份
		HttpServletRequest request = ServletActionContext.getRequest();
		int year = 0;
		if(request.getParameter("year") != null){
			year = Integer.valueOf(request.getParameter("year"));
		} else {
			//默认 当前年份
			year = Calendar.getInstance().get(Calendar.YEAR);
		}
		//2、获取统计年度的每个月的投诉数
		statisticMap = new HashMap<String, Object>();
		statisticMap.put("msg", "success");
		statisticMap.put("chartData", complainService.getAnnualStatisticDataByYear(year));
		return "annualStatisticData";
	}

	public Complain getComplain() {
		return complain;
	}

	public void setComplain(Complain complain) {
		this.complain = complain;
	}

	public String getStartTime() {
		return startTime;
	}

	public void setStartTime(String startTime) {
		this.startTime = startTime;
	}

	public String getEndTime() {
		return endTime;
	}

	public void setEndTime(String endTime) {
		this.endTime = endTime;
	}

	public ComplainReply getReply() {
		return reply;
	}

	public void setReply(ComplainReply reply) {
		this.reply = reply;
	}

	public String getStrTitle() {
		return strTitle;
	}

	public void setStrTitle(String strTitle) {
		this.strTitle = strTitle;
	}

	public String getStrState() {
		return strState;
	}

	public void setStrState(String strState) {
		this.strState = strState;
	}

	public Map<String, Object> getStatisticMap() {
		return statisticMap;
	}

}

<span style="font-size:18px;">service</span>
package cn.itcast.nsfw.complain.service.impl;

import java.util.ArrayList;
import java.util.Calendar;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.annotation.Resource;

import org.springframework.stereotype.Service;

import cn.itcast.core.service.impl.BaseServiceImpl;
import cn.itcast.core.util.QueryHelper;
import cn.itcast.nsfw.complain.dao.ComplainDao;
import cn.itcast.nsfw.complain.entity.Complain;
import cn.itcast.nsfw.complain.service.ComplainService;

@Service("complainService")
public class ComplainServiceImpl extends BaseServiceImpl<Complain> implements ComplainService {
	
	private ComplainDao complainDao;
	
	@Resource
	public void setComplainDao(ComplainDao complainDao) {
		super.setBaseDao(complainDao);
		this.complainDao = complainDao;
	}

	@Override
	public void autoDeal() {
		Calendar cal = Calendar.getInstance();
		cal.set(Calendar.DAY_OF_MONTH, 1);//设置当前时间的日期为1号
		cal.set(Calendar.HOUR_OF_DAY, 0);//设置当前时间的日期为1号,0时
		cal.set(Calendar.MINUTE, 0);//设置当前时间的日期为1号,0分
		cal.set(Calendar.SECOND, 0);//设置当前时间的日期为1号,0秒
		
		//1、查询本月之前的待受理的投诉列表
		QueryHelper queryHelper = new QueryHelper(Complain.class, "c");
		queryHelper.addCondition("c.state=?", Complain.COMPLAIN_STATE_UNDONE);
		queryHelper.addCondition("c.compTime < ?", cal.getTime());//本月1号0时0分0秒
		
		List<Complain> list = findObjects(queryHelper);
		if(list != null && list.size() > 0){
			//2、更新投诉信息的状态为 已失效
			for(Complain comp: list){
				comp.setState(Complain.COMPLAIN_STATE_INVALID);
				update(comp);
			}
		}
	}

	@Override
	public List<Map> getAnnualStatisticDataByYear(int year) {
		List<Map> resList = new ArrayList<Map>();
		//1、获取统计数据
		List<Object[]> list = complainDao.getAnnualStatisticDataByYear(year);
		if(list != null && list.size()>0){
			Calendar cal = Calendar.getInstance();
			//是否当前年份
			boolean isCurYear = (cal.get(Calendar.YEAR) == year);
			int curMonth = cal.get(Calendar.MONTH)+1;//当前月份
			//2、格式化统计结果
			int temMonth = 0;
			Map<String, Object> map = null;
			for(Object[] obj: list){
				temMonth = Integer.valueOf((obj[0])+"");
				map = new HashMap<String, Object>();
				map.put("label", temMonth+ " 月");
				if(isCurYear){//当前年份
					//当前年份：如果月份已过的则直接取投诉数并且值为空或null时则设为0；如果月份未过的则全部投诉数置空
					if(temMonth > curMonth){//未到月份，则投诉数为空
						map.put("value", "");
					} else {//已过月份
						map.put("value", obj[1]==null?"0":obj[1]);
					}
				} else {//非当前年份则直接取投诉数并且值为空或null时则设为0
					map.put("value", obj[1]==null?"0":obj[1]);
				}
				resList.add(map);
			}
		}
		
		return resList;
	}

}




做一只蝴蝶
关注
专栏目录
FusionCharts Flash图表组件
05-18
FusionCharts free 是一个跨平台，跨浏览器的flash图表组件解决方案，能够被 ASP．NET, ASP, PHP, JSP, ColdFusion, Ruby on Rails, 简单 HTML 页面甚至PPT调用。你不需要知道任何关于flash编程的知识，你只需要知道你所用的编程语言就可以了。
FusionCharts统计图导出为图片或pdf
04-10
本文将深入探讨FusionCharts如何实现统计图的导出功能，包括将其保存为图片和PDF格式。 首先，我们需要理解FusionCharts的基本工作原理。FusionCharts利用HTML5的Canvas元素或者SVG（Scalable Vector Graphics）...
as3.0统计图组件化
weixin_30439067的博客
07-11 153
利用amchart改写 <?xml version="1.0" encoding="utf-8"?><s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.ado...
fusionCharts属性参考API
qzc711的专栏
10-18 1万+
[原创]FusionCharts的分类及属性介绍   2011-08-14 21:21:39|  分类： fusioncharts |  标签： |字号大中小 订阅 《FusionCharts学习及使用笔记》之 第一篇 其实一直以来我都在
fusionCharts图表组件使用
sea_wave2011的专栏
10-24 1529
这里只简单介绍下FusionCharts，详情请百度。 FusionCharts 较其他图表组件的优势： >>  图表美观，极具视觉震撼，支持图表的切片、旋转、无限级钻取； >>  种类丰富，饼形、线、条形、柱形，仪表盘，热点地图等90种图表； >>  可在flash和javascript中呈现图表，这意味着可通过智能手机客户端来访问我们的应用； >>  提供了图表导出图片功能，支持将图
FusionCharts的使用方法
07-01 500
今天统计价格变化规律的时候找到的一个很好的文档，很详细 一、简介 ØFusionCharts是InfoSoftGlobal公司的一个产品，InfoSoftGlobal公司是专业的Flash图形方案提供商，他们还有几款其他的，基于Flash技术的产品，都非常的漂亮。 ØFusionChartsFree则是FusionCharts提供的一个免费版本，虽然免...
基于FusionCharts配置化统计模块
09-03
这个定制化的统计模块是基于FusionCharts的基础组件构建的，它允许开发者通过简单的XML配置来定义图表的样式、数据源、交互行为等属性，从而简化了图表的创建过程。 **XML配置化** XML（Extensible Markup ...
基于WEB的Flash 统计图控件(Flex---FusionCharts_Evaluation v3)及其中文开发指南
06-12
总之，“基于WEB的Flash统计图控件(Flex---FusionCharts_Evaluation v3)及其中文开发指南”是学习和掌握使用Flex和FusionCharts创建交互式图表的重要资源。通过深入学习和实践，开发者可以充分利用这两个工具，为Web...
fusioncharts图表组件效果图集
10-12
FusionCharts支持多种图表类型，包括但不限于柱状图、折线图、饼图、散点图、地图等，适用于数据分析、业务报告、网站统计等多个领域。其中，柱状图用于比较不同类别的数量或值；折线图则适用于展示趋势和变化；饼图...
利用FusionCharts组件制作动态Web统计图表
04-19
本例中下载的是免费版本，虽然功能相对较少但仍能支持多种统计图。 3. **配置服务器**： - 将FusionCharts组件解压到指定路径（例如D:\fusioncharts）。 - 将解压后的`charts`和`fusionsuite`两个子目录下的内容...
FusionCharts
06-05
fusioncharts-suite-xt.zip官方下载的，还有自己写的使用例子。
wfChart 统计图表组件 v5.6.zip
07-11
全新开发的统计图表组件--wfChart，使用简单，功能强大，制作统计图效果极佳。     全球领先的VML技术，率先支持与统计图表融合，使HTML和VML统计图完全兼容。     本组件支持多种样式图表，包括柱型图、横柱型图、曲线图、饼图、点图、区域图。     可选择的8大主题风格，且主题可再配置，在加快开发的同时又提供更好的图像效果。     组件图表提供两种输出接口，包括保存，直接显示(您再也不用定时清理那些临时的垃圾图表)。     图表采用多种图片输出格式(包括jpg,gif,bmp,png),可自定义图表质量,适合不同网络速度和图表质量要求。     采用了标准的Com组件方式，只需服务器端注册即可，而再也不用担心客户机是否支持。     本组件可设定大量样式、特效、渐变，加强图表美感，甚至可直接设定色度、饱和度、亮度或灰度。     本组件经过多种平台环境负荷压力测试，运行稳定、速度快、资源占用低。
fusioncharts.dll文件
03-24
FusionCharts Free(图表flash控件)，单dll文件，用于ＷＥＢ页面图表生成的组件FusionCharts，非常好用，效果好
JS使用FusionCharts显示图表（JS插件）
乐在克里特
02-19 136
2016/2/4 1.jQuery.getJSON(url, [data], [callback])   url:发送请求地址。   data:待发送 Key/value 参数。   callback:载入成功时回调函数。   例，   jq.getJSON(  "&lt;%=servletPrefix%&gt;FCExporterServlet.bghc",  {   "czlx" : ty...
百度统计图组件
程序员记事本
06-10 509
百度出品的ECharts组件，看起来很漂亮，https://github.com/ecomfe/echarts
（转载）FusionCharts参数的详细说明 中文乱码 字体大小
xuzelong的专栏
10-20 274
功能特性animation                    是否动画显示数据，默认为1(True)showNames                    是否显示横向坐标轴(x轴)标签名称rotateNames                是否旋转显示标签，默认为0(False):横向显示showValues                    是否在图表显示对应的数据值，默认为1(T...
fusionCharts的详细解析与应用
热门推荐
liangxanhai的专栏
10-10 1万+
一、fusioncharts的介绍：        FusionCharts是一个Flash的图表组件，它可以用来制作数据动画图表，其中动画效果用的是Adob  e Flash 8 （原Macromedia Flash的）制作的flash ， FusionCharts可用于任何网页的脚本语言类似于HTML ， .NET，ASP ， JSP技术的， PHP ， ColdFusion等，提供互动性和
FusionCharts-Free：无成本的丰富统计图形生成教程
FusionCharts_Free是一款由InfoSoftGlobal公司开发的强大的、跨平台的、跨浏览器的Flash图表组件解决方案，专为需要在多种编程环境如ASP.NET、ASP、PHP、JSP、ColdFusion、Ruby on Rails以及简单的HTML页面中生成...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值