您的位置：首页 > 其它

使用FusionChartsFree整合项目

2017-07-27 15:10 591 查看

一，前言

                    前面我们说了使用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">

<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>


<div id="chartdiv" align="center">图形将出现这个DIV里，到时这里的字将被图形替代。</div>

<s:hidden id="data" name="data" value="%{#request.chart}"></s:hidden>

<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.setDataX
4000
ML(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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航