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

最新推荐文章于 2019-07-17 13:34:59 发布

月下c独舞

最新推荐文章于 2019-07-17 13:34:59 发布

阅读量519

点赞数

分类专栏： jsp html js java

本文链接：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>";