在一个页面显示多个iChart报表

最新推荐文章于 2018-09-09 19:54:08 发布

ithouse

最新推荐文章于 2018-09-09 19:54:08 发布

阅读量1.6k

点赞数

分类专栏： JSP HTML 文章标签： html js jstl td ichart多个报表

本文链接：https://blog.csdn.net/ithouse/article/details/38586859

版权

JSP 同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

HTML

9 篇文章 0 订阅

订阅专栏

<%@ 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"></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>

ithouse

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
在一个页面显示多个iChart报表

<%@ page language="java" pageEncoding="UTF-8" contentType="text/html;charset=utf-8" isELIgnored="false"%> Project Report --%>
复制链接

扫一扫