一，前言

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

使用FusionChartsFree整合项目相关推荐

Text2SQL 语义解析数据集、解决方案、paper资源整合项目
https://github.com/yechens/NL2SQL Text2SQL 语义解析数据集.解决方案.paper资源整合项目
jsp删除时提示_Java修行第058-059天 Servlet+JSP+JavaBean整合项目总结
Servlet+JSP+JavaBean整合项目的总结项目分层本次项目的设计使用MVC模型来进行设计,MVC全称为model view controller,是模型视图控制器的缩写 Model 模 ...
SSM整合项目实践——完成图书的CRUD
该SSM整合项目用的是环境是JDK1.8.MySQL8.0,前端用到了bootstrap 源码链接:https://github.com/uphe/ssm-crud 先看一下基本架构这里展示一下效果 ...
Android基础整合项目之节日群发助手(二)
Android基础整合项目(一) 之节日群发助手part 2 --转载请注明出处:coder-pig 本节引言: 在上一节中我们已经做出了我们群发助手的第一个界面以及完成了联系人的读取以及数据库的录 ...
SLCP验厂辅导，工厂进行社会劳工整合项目（SLCP认证）验证的具体步骤
SLCP认证(社会劳工整合项目)验证步骤工厂进行社会劳工整合项目(SLCP认证)验证的具体步骤是: 1.首先需要在在网关(Gateway)建立一个账号. 2.选择合适的托管平台(AH),建立托管平台 ...
SLCP验厂辅导，工厂进行社会劳工整合项目（SLCP认证）验证的具体步骤是
SLCP认证(社会劳工整合项目)验证步骤工厂进行社会劳工整合项目(SLCP认证)验证的具体步骤是: 1.首先需要在在网关(Gateway)建立一个账号. 2.选择合适的托管平台(AH),建立托管平台 ...
视频教程-Springboot+Vue前后的分离整合项目实战-Java
Springboot+Vue前后的分离整合项目实战 10多年互联网一线实战经验,现就职于大型知名互联网企业,架构师, 有丰富实战经验和企业面试经验:曾就职于某上市培训机构数年,独特的培训思路,培训体系 ...
如何用Word整合项目计划书的各部分？
本博文只供博主学习记录与交流,如需转载,请注明出处. 昨晚通宵修改项目计划书,后半夜整合项目计划书,从凌晨4点多开始,一直到将近7点结束,中间休息了半个多小时,粗略计算整合200左右页的项目计划书用了 ...
日志10.24整合项目文档并运行+周报10.18~22工作总结
日志10.24整合项目文档并运行一. 安装pnpm,更新代码与远程同步,启动后端itms-server.前端itms-webapp项目 1.安装pnpm:已管理员身份运行命令行,跳转到前端文件夹it ...
简单的SSM整合项目。
文章目录前言 1.SSM的定义 2. SSM整合开发的流程 3.SSM整合需要用到的容器 4. SSM整合的实现步骤 1.准备好本次项目所需要使用的数据库表 2.新建maven web项目 3.加入 ...

使用FusionChartsFree整合项目

一，前言

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

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

使用FusionChartsFree整合项目相关推荐

最新文章

热门文章