Maison >interface Web >tutoriel HTML >在一个页面显示多个iChart报表_html/css_WEB-ITnose
<%@ page language="java" pageEncoding="UTF-8" contentType="text/html;charset=utf-8" isELIgnored="false"%><%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%><%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags"%><%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%><html> <head> <title>Project Report</title> <c:set var="baseUrl" value="${pageContext.request.contextPath}"/> <%--<link rel="stylesheet" href="../resources/css/bootstrap.min.css"/> <link rel="stylesheet" href="../resources/css/bootstrap-theme.min.css"/>--%> <!--[if lt IE 9]><script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]--> <script type="text/javascript" src="../resources/js/jquery/jquery-1.9.0.js"></script> <script type="text/javascript" src="../resources/js/ichart.1.2.min.js"></script> <script type="text/javascript" src="../resources/js/randomcolor.js"></script> <script type="text/javascript"> $(function(){ var defaultId = "${defaultSelected}"; $("select option").each(function(){ if($(this).val()==defaultId){ $(this).attr("selected","selected"); } }); //alert(defaultId); <c:forEach var="bntm" items="${buildNameTaskMap}"> <c:forEach var="bntmv" items="${bntm.value}"> var data = [ { value:[${bntmv.value[0]}], color:'#47AAB3' }, { value:[${bntmv.value[1]}], color:'#ECAD55' } ]; var chart = new iChart.BarStacked2D({ render : 'canvasDiv${bntm.key}${bntmv.key}', data: data, width : 400, height : 45, bar_height:25, shadow_blur : 2, shadow_offsetx : 1, shadow_offsety : 0, border:0, showpercent:true, decimalsnum:0, coordinate:{ scale:[{ position:'bottom', scale_enable : false, start_scale:0, end_scale:${bntmv.value[2]}, listeners:{ parseText:function(t,x,y){ return {text:+t} } } }], width:600, height:40 } }); chart.draw(); </c:forEach> </c:forEach> }); </script> </head> <body> <div class="ui-page-head"> <h2> Build Report <a href="${baseUrl}/report/showReport.shtml"><img src="../resources/images/goback.png" alt="在一个页面显示多个iChart报表_html/css_WEB-ITnose" ></a> </h2> </div> <form action="${baseUrl}/report/buildReport.shtml"> <span>Select a project:</span> <select name="selectedProId"> <c:forEach items="${projectNameId}" var="pni"> <option value="${pni.value}">${pni.key}</option> </c:forEach> </select> <button type="submit" id="submit">search</button> </form><br/> <c:if test="${null ne buildNameTaskMap}"> <table class="ui-table"> <tr> <th>Build Name</th> <th>Task Name</th> <th>Success Times</th> <th>Failure Times</th> <th>Total Times</th> <th>Output Report</th> </tr> <c:forEach var="bntm" items="${buildNameTaskMap}"> <%--Build Name--%> <tr> <td rowspan="${bntm.value.size()+1}"> ${bntm.key} </td> </tr> <c:forEach var="bntmv" items="${bntm.value}"> <tr> <%--Task Name--%> <td>${bntmv.key}</td> <td>${bntmv.value[0]}</td> <td>${bntmv.value[1]}</td> <td>${bntmv.value[2]}</td> <td><div id="canvasDiv${bntm.key}${bntmv.key}"></div></td> <%--用一个for循环将所有的id都包括,在JS中传参。--%> </tr> </c:forEach> </c:forEach> </table> </c:if> <c:if test="${null eq buildNameTaskMap}"> No Output. </c:if> </body></html>