使用FusionChartsFree整合项目

K_122

于 2017-07-27 15:10:20 发布

阅读量813

点赞数

分类专栏： java 文章标签：图表 FusionChartsFree

本文链接：https://blog.csdn.net/K_122/article/details/76194999

版权

java 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

一，前言

前面我们说了使用JFreeChart如何生成图表，现在我们使用FusionChartsFree来生成图表，相比于 jfreeChart，FusionCharts具有一定的特效效果，可以说比jfreeChart效果好。但是FusionChartsFree,以下简称为FCF，不像jfreeChart那样是使用api来生成图片的，但是FCF是用XML和js来生成图片的，以下来看下如何用

FCF来整合项目

下载FusionchartFree包，目录如下所示

将charts里面所有的swf文件拷入到项目的web-inf目录下，我放到web-INF目录下的fusioncharts目录下，然后将jsClass的js文件考到web-inf下的script目录下，你可也可以放到别的目录下，但是在web-INF目录下

2.准备一个用于生成图片的页面，如下

<%@ page language="java" pageEncoding="UTF-8" contentType="text/html; charset=utf-8"%>
<%@taglib uri="/struts-tags" prefix="s"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>用户按照性别分报表统计</title>
<LINK href="${pageContext.request.contextPath }/css/Style.css" type="text/css" rel="stylesheet">
<!-- 1:加载JS -->
<script language="JavaScript" src="${pageContext.request.contextPath }/script/FusionCharts.js"></script>


</head>

<body>

<fieldset style="width: 600px; height: 600px; padding: 1 background:${pageContext.request.contextPath }/images/back1.JPG"><legend>
<font color="#0000FF">
<img border="0" src="${pageContext.request.contextPath }/images/zoom.gif" width="14" height="14"> 报表统计</font></legend>		
	<!-- FCF报表加载数据 -->
	<!-- 2:添加div标签 -->
	<div id="chartdiv" align="center">图形将出现这个DIV里，到时这里的字将被图形替代。</div>  
	<!-- 3:使用隐藏域获取XML数据 -->
	<s:hidden id="data" name="data" value="%{#request.chart}"></s:hidden>
	<!-- 4:使用js完成加载数据 -->
	<script type="text/javascript">   
        var myChart = new FusionCharts("${pageContext.request.contextPath }/fusionCharts/FCF_Pie2D.swf", "myChartId", "600", "500");  
        var di = document.getElementById("data").value;
        myChart.setDataXML(di);   
        myChart.render("chartdiv");    
    </script>  
	
</fieldset>
</body>
</html>

将fusionChartFree.js放入到这个页面,创建一个div，加入一个id为chartdiv,使用一个隐藏字段，id=data,注意后面的这个js代码，就是用来创建图的，但是数据由下面的data来添加，注意setDataXml(di)用来添加数据的，render用来替换chartdiv的，替换字段生成图片

3.最后是要在服务器端去生成xml文件，xml文件中的数据，就是将来在表中出现的数据如上

//查询数据库，查询数据库所需要的数据集合
		
		List<Object[]> list = elecUserService.chartUser("性别","sexID");
		
		//组织XML数据
		 StringBuilder stringBuilder = new StringBuilder();
		 
		 if(list!=null&&list.size()>0){
			for(int i=0;i<list.size();i++){
				Object[] obj = list.get(i);
				
				if(i==0){
					//组织第一个数据
					String x="男女比例的统计";
					String y ="unit";//FusionChartFree存在一个问题，那就是y轴不支持中文
					
					stringBuilder.append("<graph caption='用户统计表("+obj[0].toString()+")' xAxisName='"+x+"' bgcolor='FFFFDD' "
							+ "yAxisName='"+y+"' showValues='1' decimals='0' baseFontSize='18'  maxColWidth='60' showNames='1' decimalPrecision='0'>");
					stringBuilder.append("<set name='"+obj[1].toString()+"' value='"+obj[2].toString()+"' color='F6BD0F' />");
				}
				
				
				if(i==list.size()-1){
					stringBuilder.append("<set name='"+obj[1].toString()+"' value='"+obj[2].toString()+"' color='FF8E46'/>");
					stringBuilder.append("</graph>");
				}
			}
		 }
		
		request.setAttribute("chart",stringBuilder);

其实这里和JfreeChart是一样的，查询数据库的数据，然后按FCF的xml规定生成xml数据，最后放到request域中，要知道，这里的chart就是页面中的那个chart

K_122

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用FusionChartsFree整合项目

一，前言前面我们说了使用JFreeChart如何生成图表，现在我们使用FusionChartsFree来生成图表，相比于 jfreeChart，FusionCharts具有一定的特效效果，可以说比jfreeChart效果好。但是FusionChartsFree,以下简称为FCF，不像jfreeChart那样是使用api来生成图片的，但是FCF是用XM
复制链接

扫一扫