FusionCharts插件制作饼图、曲线图jsp页面实例

最新推荐文章于 2023-10-20 17:08:54 发布
最新推荐文章于 2023-10-20 17:08:54 发布
阅读量471 收藏
点赞数
分类专栏： jsp html js java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_27877761/article/details/52598275
版权
java 同时被 3 个专栏收录
15 篇文章 0 订阅
订阅专栏
jsp
3 篇文章 0 订阅
订阅专栏
html
3 篇文章 0 订阅
订阅专栏

饼图（详细说明在这就不说了，我直接把jsp页面代码传上来，能看懂怎么调用的希望能帮助到你们，前提记得下载插件文件夹放项目根目录）：

代码：

 

<%@ page contentType="text/html;charset=utf-8" language="java" import="java.util.*" errorPage="" %>
<%@ taglib uri="/bean" prefix="bean"%> 
<%@ taglib uri="/html" prefix="html"%>
<%@ page import="cn.com.chx.bo.AppBo"%>
<%@ page import="cn.com.chx.im.util.NotifyMessage"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta HTTP-EQUIV="Pragma" content="no-cache" />
<meta HTTP-EQUIV="Cache-Control" content="no-cache" />
<meta HTTP-EQUIV="Expires" content="0">
<meta http-equiv="X-UA-Compatible" content="IE=8">
<script type="text/javascript" src="../js/jquery-1.11.2.min.js"></script>
<script  type="text/javascript" src="../FusionCharts/JSClass/FusionCharts.js"></script>
<%
 AppBo bo = new AppBo();
 List list = bo.query("SELECT * FROM JSSC_LBGL ORDER BY SNO");
 //横向合计
 int rightyhnum = 0;
 int rightjgnum = 0;
 //用户数
 int yhnum = 0;
 //机构数
 int jgnum = 0;
 List list1 = null;
 List list2 = null;
 String pie3D = "";
 //查询用户在某行业数量
 ArrayList listYhnum = new ArrayList();
 //查询机构在某行业数量
 ArrayList listJgnum = new ArrayList();
 String lbname  = null;

%>
<title>统计结果</title>
</head>
<body>
<div id="chartdiv" width="100%" align="center"></div>
 <table width="850"  border="1" cellpadding="0" style="border-collapse:collapse;" cellspacing="0" bordercolor="#000000" align="center">
  <tr>
    <td colspan="<%=list.size()+3%>"><div align="center" style="font-weight:bold;font-size:20px;" >累  计</div></td>
  </tr>
  <tr>
 <td width="15%" rowspan=2></td>
 <td width="70%" colspan="<%=list.size()%>" align="center">小行业</td>
 <td width="15%" rowspan=2 align="center">合计</td>
  </tr>
  <tr>
   <%
    if(list != null && list.size()>0){
     for(int i=0;i<list.size();i++){
      lbname = (String)((HashMap)list.get(i)).get("LBNAME");
      if(lbname == null || lbname.equals("")){
       lbname = "";
      }
   %>
   <td width="7%" align="center"><%=lbname%></td>
   <%
     }
    }
   %>
 </tr>
 <tr>
   <td width="15%" align="center">用 户</td>
   <%
    if(list != null && list.size()>0){
     for(int j=0;j<list.size();j++){
      String lbnum = (String)((HashMap)list.get(j)).get("LBNUM");
      if(lbnum == null || lbnum.equals("")){
       lbnum = "";
      }
      
      list1= bo.query("SELECT COUNT(*) AS COUNTYH FROM JSSC_USER WHERE HANGYEFL LIKE '%"+ lbnum +"%'");
      if(list1 != null && list1.size()>0){
       String yhnum1 = (String) ((HashMap)list1.get(0)).get("COUNTYH");
       if(yhnum1 == null || yhnum1.equals("")){
        yhnum1 = "0";
       }
       yhnum = Integer.parseInt(yhnum1);
      }
      rightyhnum = rightyhnum + yhnum;
      HashMap map= new HashMap();
      map.put("yhnum",yhnum);
      
      listYhnum.add(map);
   %>
   <td width="7%" align="center"><%=yhnum%></td>
   <%
     }
   %>
   <td width="15%" align="center"><%=rightyhnum%></td>
   <%
    }
   %>
   
 </tr>
 <tr>
   <td width="15%" align="center">机 构</td>
   <%
    if(list != null && list.size()>0){
     for(int j=0;j<list.size();j++){
      String lbnum = (String)((HashMap)list.get(j)).get("LBNUM");
      if(lbnum == null || lbnum.equals("")){
       lbnum = "";
      }
      list2= bo.query("SELECT COUNT(*) AS COUNTJG FROM JSSC_COMPANY WHERE HANGYEFL LIKE '%"+ lbnum +"%'");
      if(list2 != null && list2.size()>0){
       String jgnum1 = (String) ((HashMap)list2.get(0)).get("COUNTJG");
       if(jgnum1 == null || jgnum1.equals("")){
        jgnum1 = "0";
       }
       jgnum = Integer.parseInt(jgnum1);
      }
      rightjgnum = rightjgnum + jgnum;
      HashMap map1= new HashMap();
      map1.put("jgnum",jgnum);
      listJgnum.add(map1);
   %>
   <td width="7%" align="center"><%=jgnum%></td>
   <%
     }
   %>
   <td width="15%" align="center"><%=rightjgnum%></td>
   <%
    }
   %>
 </tr>
 <tr>
   <td width="15%" align="center">合 计</td>
   <%
    int hyhjnum = 0;
    if(list != null && list.size()>0){
     List color = new ArrayList();
     color.add("#ff5152");
     color.add("#FF1493");
     color.add("#D8BFD8");
     color.add("#8B008B");
     color.add("#9400D3");
     color.add("#483D8B");
     color.add("#B0C4DE");
     color.add("#00FFFF");
     color.add("#00FA9A");
     color.add("#9ACD32");
     for(int i=0;i<list.size();i++){
      lbname = (String)((HashMap)list.get(i)).get("LBNAME");
      if(lbname == null || lbname.equals("")){
       lbname = "";
      }
      if(listYhnum != null && listYhnum.size()>0){
       yhnum = (Integer) ((HashMap)listYhnum.get(i)).get("yhnum");
      }
      if(listJgnum != null && listJgnum.size()>0){
       jgnum = (Integer) ((HashMap)listJgnum.get(i)).get("jgnum");
      }
      hyhjnum = yhnum + jgnum;
   %>
   <td width="7%" align="center"><%=hyhjnum%></td>
   <%
      int ci = i;
      
      if(i >= 10){
       ci = i%10;
       
      }
      if(hyhjnum != 0){
       pie3D += "<set color='"+color.get(ci)+"' name='"+lbname+"' value='"+hyhjnum+"' />";
      }
     }
     int hyhjrightnum = rightyhnum + rightjgnum;
   %>
   <td width="7%" align="center"><%=hyhjrightnum%></td> 
   <%
    }  
   %>
 </tr>
 <%
    
    String pie3D1 = pie3D + "</graph>";
 %>
 <tr id="bingtu" style="display:none;">
 <span id="message" style="color:red;"></span>
      <td align="center">
   <script type="text/javascript">
     var width=document.getElementById('chartdiv').scrollWidth;
     var myChart= new FusionCharts('../FusionCharts/Charts/FCF_Pie3D.swf','myChartId',width*0.9,'500');
     var empsta="<graph bgAlpha='0' caption='用户累计统计饼图' baseFontSize='12'   bgColor='F1f1f1' decimalPrecision='0' showPercentageValues='0' numberPrefix='0' showNames='1' showValues='0' showPercentageInLabel='0' pieYScale='60' pieBorderAlpha='40' pieFillAlpha='70' pieSliceDepth='30' pieRadius='200' >"+"<%=pie3D1%>";
   myChart.setDataXML(empsta);    
   myChart.render("chartdiv");
  </script>
      </td>
    </tr>
  </table>
</body>
</html>

曲线图：

代码：

<%@ page contentType="text/html;charset=UTF-8" language="java" import="java.util.*" errorPage="" %>
<%@ taglib uri="/bean" prefix="bean"%> 
<%@ taglib uri="/html" prefix="html"%>
<%@ page import="cn.com.chx.bo.AppBo"%>
<%@ page import="cn.com.chx.im.util.NotifyMessage"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta HTTP-EQUIV="Pragma" content="no-cache" />
<meta HTTP-EQUIV="Cache-Control" content="no-cache" />
<meta HTTP-EQUIV="Expires" content="0">
<meta http-equiv="X-UA-Compatible" content="IE=8">
<script type="text/javascript" src="../js/jquery-1.11.2.min.js"></script>
<script  type="text/javascript" src="../FusionCharts/JSClass/FusionCharts.js"></script>
<%
 AppBo bo = new AppBo();
 
 String year = (String)request.getAttribute("year");
 
 List listYear = bo.query("SELECT DISTINCT(RIQI) FROM (SELECT SUBSTR(REGISTERTIME,0,4) AS RIQI FROM JSSC_USER UNION SELECT SUBSTR(REGISTERTIME,0,4) AS RIQI FROM JSSC_COMPANY)");
 List list = (List)request.getAttribute("listYhValue");
 List list1 = (List)request.getAttribute("listJgValue");
 String category="";
 String dataSet = "";
 ArrayList listSeriesName = new ArrayList();
 listSeriesName.add("个人用户数");
 listSeriesName.add("机构用户数");
 listSeriesName.add("用户总数");
 ArrayList colorList = new ArrayList();
 colorList.add("008ED6");
 colorList.add("8BBA00");
 colorList.add("89761E");
 for(int i =0;i<listSeriesName.size();i++){
  dataSet = dataSet + "<dataset seriesName='" + listSeriesName.get(i) + "' color='" + colorList.get(i) + "' anchorBorderColor='" + colorList.get(i) + "' anchorBgColor='" + colorList.get(i) + "'>";
  for (int j = 0; j < 12; j++) {
   if (i == 0) {
    category = category + "<category name='"+year+"年"+(j+1)+"月' />";
   }
   if(i == 0){
    if (list != null && list.size() > 0) {
     HashMap map = (HashMap)list.get(j);
     dataSet = dataSet + "<set value='"+map.get("yhnum")+"' />";
    } else {
     dataSet = dataSet + "<set value='0' />";
    }
   }else if(i == 1){
    if (list1 != null && list1.size() > 0) {
     HashMap map1 = (HashMap)list1.get(j);
     dataSet = dataSet + "<set value='"+map1.get("jgnum")+"' />";
    } else {
     dataSet = dataSet + "<set value='0' />";
    }
   }else if(i == 2){
    int yhnum = 0;
    int jgnum = 0;
    if (list != null && list.size() > 0) {
     yhnum = (Integer)((HashMap)list.get(j)).get("yhnum");
    }
    if(list1 != null && list1.size() > 0){
     jgnum = (Integer)((HashMap)list1.get(j)).get("jgnum");
    }
     
     int hejinum = yhnum + jgnum;
     dataSet = dataSet + "<set value='"+hejinum+"' />";
   }
   
  }
  dataSet = dataSet + "</dataset>";
 }
%>
<title>统计结果</title>
<script type="text/javascript">
 function getChange(){
  var nianfen = $("#nianfen").val();
  location.href="/NfqushitjAction.do?actionType=nianfen&year="+nianfen;
 }
 
 function chongzhi(){
  var chongzhiyear = $("#chongzhiyear").val();
  
  $("#nianfen").val(chongzhiyear);
 }
 
</script>
</head>
<body οnlοad="chongzhi()">
<html:form action="/NfqushitjAction.do"   method="POST">
<html:hidden property="actionType"/>
<input type="hidden" id="chongzhiyear" value="<%=year%>">
<div align="center" style="padding-top:20px;padding-bottom:20px;">
 <select name="select" id="nianfen" style="font-size:18px;" οnchange="getChange()">
  
  <%
   if(listYear != null && listYear.size()>0){
    for(int i=0;i<listYear.size();i++){
     String xyear = (String)((HashMap)listYear.get(i)).get("RIQI");
     
  %>
  <option value="<%=xyear%>"><%=xyear%></option>
  <%
    }
   }
  %>
 </select>
 <span style="font-weight:bold;font-size:20px;" >年度趋势统计</span>
</div>
<div id="chartdivs" width="100%" align="center"></div>
<script type="text/javascript">
 var charts = new FusionCharts("../FusionCharts/Charts/FCF_MSLine.swf", "ChartId", document.getElementById('chartdivs').scrollWidth, "200");
    var strXML="<graph bgAlpha='0' chartRightMargin='50' baseFontSize='12'   bgColor='F1f1f1'  caption='' hovercapbg='FFECAA' hovercapborder='F47E00' formatNumberScale='0' decimalPrecision='0' showvalues='0' numdivlines='5' numVdivlines='0' yaxisminvalue='0' yaxismaxvalue='80'  rotateNames='0'><categories><%=category%></categories><%=dataSet%></graph>";

 charts.setDataXML(strXML);    
 charts.render("chartdivs");
 //alert(strXML);
</script>
</html:form>
</body>
</html>

 

月下c独舞
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
三维饼图插件——cubicPieChart-1.0.min.js
03-12
echarts没有三维饼图，但是有时候又需要在前端绘制三维饼图怎么办？这个时候可以考虑用threejs来实现功能。 使用示例： var cubic = new Cubic.PieChart("WebGL-output", { width: 400, height: 300, thickness: 5,//厚度 radius: 30,//半径 colors: [0xffffff, 0xff00ff, 0xffff00, 0x0000ff,0x5F9EA0,0x00FF7F],//颜色数组16进制的数组 data: [12, 13, 5, 50, 23, 54],//数据数组 startAngle: 0,//起始角 background: 0x00ffff,//背景色，16进制数字 opacity: 1 //背景透明度 }); console.log(cubic.getPosition()); console.log(cubic.getRotation()); // cubic.setPosition(0, 20, 0); // cubic.setRotation(0, 0, 0); // cubic.remove();
21个Javascript图表插件程序
pittzhangswing的专栏
09-08 924
21个Javascript图表插件程序 原文地址：http://hi.baidu.com/danghj/blog/item/37aeb1776054ee17b051b912.html 图表(Chart)能直观的展示数据，但静 态图片图表缺乏交互性，更新维护起来比较
使用java-jsp+echarts开发简单的曲线图
survive_thrive的博客
07-17 806
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Ma...
[JSP]jfreechart+sql实现时间曲线图
cherryQQ
06-27 221
前不久为公司客户写了个曲线图的程序 用jsp帮助实现的，当中遇到了不少的问题，后来在ITPUB的一些朋友和自己的辛苦努力下终于完成了该程序 学会了自己看API来写程序，正如ITPUB的一位老将所言，如果不会看API，还是放弃编程，在这次事件之后，确实发现，API是编程时不可或缺的“工具”，hoho 在这里把我使用的例子写出来，其中的参数只作参考 一、JFreeCha...
用echarts在vue2中实现3d饼图
最新发布
蜗牛~~
10-20 5171
1、修改3d饼图大小，在大概244行的位置，grid3D的对象里面，修改distance属性，即可调整。在3d饼图中设置下面这两属性是没用的，所以这里请注意一下，记得去grid3D里面修改他的位置。4、修改饼图位置，这个常用，也是在grid3D这个属性里面设置，在大概240行的位置。3、修改3d饼图颜色，直接在data中的optionData里面修改就行了。2、修改3d饼图视角高度，在大概161行的位置，修改函数的第二个参数。二、在main.js中引入。直接复制粘贴吧，省事。
jQuery插件FusionCharts绘制2D环饼图效果示例【附demo源码】
10-20
主要介绍了jQuery插件FusionCharts绘制2D环饼图效果,结合实例形式分析了jQuery使用插件FusionCharts载入xml数据绘制2D环饼图的相关步骤与操作技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下
jQuery插件FusionCharts实现的3D柱状图效果实例【附demo源码下载】
10-20
主要介绍了jQuery插件FusionCharts实现的3D柱状图效果,结合具体实例形式详细分析了FusionCharts插件绘制3D柱状图的具体步骤与相关操作技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下
jQuery插件FusionCharts绘制的3D饼状图效果实例【附demo源码下载】
10-20
主要介绍了jQuery插件FusionCharts绘制的3D饼状图效果,结合完整实例形式分析了基于FusionCharts图形插件绘制饼状图的操作技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下
jQuery插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
10-20
主要介绍了jQuery插件FusionCharts绘制的3D环饼图效果,结合完整实例形式分析了jQuery使用FusionCharts载入xml格式数据绘制图形的操作步骤与相关实现技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下
jQuery插件FusionCharts绘制2D双折线图效果示例【附demo源码】
10-20
主要介绍了jQuery插件FusionCharts绘制2D双折线图效果,结合实例形式分析了jQuery使用FusionCharts结合xml数据载入实现2D双折线图绘制的相关操作技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下
JSP+JFreeChart 实现曲线图、柱形图
01-05
JSP+JFreeChart 实现曲线图、柱形图
jsp数据库数据用jfreechart绘制曲线
09-27
jsp调用数据库数据，利用这些数据做算法，之后再用jfreechart绘制各种曲线，需要mysql数据库，myeclipse等开发工具，还需下载jfreechart包，mysql驱动连接。
echarts实现3D饼图
weixin_35749440的博客
12-16 4627
echarts是一款强大的数据可视化工具，它可以帮助我们快速、简单地创建各种图表。 要在echarts中实现3D饼图，需要使用echarts的 series 系列中的 pie3D 组件。 下面是一个简单的例子，展示如何使用echarts创建3D饼图： var myChart = echarts.init(document.getElementById('main')); var option =...
在JAVAWEB项目中用JSP生成数据库数据曲线图
gaoxiang0522的博客
04-18 8085
简介该项目是在后台调取数据库数据在DAO层进行处理，再把处理完的数据集合传到SERVICE层，之后JSP页面将SERVICE层的数据生成以时间为X轴，数量为Y轴的曲线图。 这是SERVICE层调取的数据。 这是JSP生成的页面曲线图。配置信息在此之前确保已经安装JAVA,Tomcat,MyEclipse,数据库并且全部配置完毕方进行下面的工作。举例：我用的是JAVA1.8，Tomcat9.0和M
FusionCharts：双Y轴双(多)曲线图表
weixin_30730053的博客
11-21 122
项目中需要FusionCharts图表显示双Y轴，好像FCF_MSLine.swf不可以这样，只能显示一个Y轴，多条线, 找了一下，用MSCombiDY2D.swf可以实现，生成图如下： 两个图表的数据是一样的，设置有一此不同而己 对应的XML文本如下：<chart palette='2' caption='图表' rotateNames...
java 调用jacob和java2word导出word，并实现将带有格式的html文本和图片插入word
月下独舞的博客
12-16 3782
jsp页面调用EDTIOR插件实现以后输入的文本带有段落格式，后台java使用jacob和java2word将带有HTML格式的文本和附件图片插入word中并导出
FusionCharts使用详解+实例+图解+Demo
07-27
下面是一个关于如何使用FusionCharts的详细说明，包括实例、图解和Demo。 1. 安装FusionCharts：首先，你需要从FusionCharts官方网站下载和安装FusionCharts库。你可以选择下载免费版本或购买商业许可证。 2. 引入...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

月下c独舞

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值