如何把数据以折线图的方式显示在jsp上

使用插件 highcharts

官方网站：https://www.hcharts.cn/demo/highcharts

　　Highcharts 在 4.2.0 开始已经不依赖 jQuery 了，直接用其构造函数既可创建图表

　　引用两个js：

　　jquery-1.8.3.min.js
　　highcharts.js（引用位置在body里）

　　jsp文件：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">

<script type="text/javascript"
    src="${pageContext.request.contextPath}/Js/tablejs/jquery-1.8.3.min.js"></script>

<style type="text/css">
#container {
    min-width: 310px;
    max-width: 400px;
    height: 400px;
    margin: 0 auto
}
        </style>

<script type="text/javascript">
    $(function() {
        $('#container')
                .highcharts(
                        {
                            labels : {
                                style : {
                                    color : "#ff0000"
                                },
                                items : [
                                        {
                                            style : {
                                                left : '50px',
                                                top : '100px'
                                            }
                                        },
                                        {
                                            style : {
                                                left : '50px',
                                                top : '200px',
                                                color : '#006cee',
                                                fontSize : '20px',
                                                fontWeight : 'bold',
                                                fontFamily : '微软雅黑'
                                            }
                                        } ]
                            },
                            xAxis : {
                                categories : [ 'Jan', 'Feb', 'Mar', 'Apr',
                                        'May', 'Jun', 'Jul', 'Aug', 'Sep',
                                        'Oct', 'Nov', 'Dec' ]
                            },
                            series : [ {
                                data : [ 29.9, 71.5, 106.4, 129.2, 144.0,
                                        176.0, 135.6, 148.5, 216.4, 194.1,
                                        95.6, 54.4 ]
                            } ]
                        });
    });
</script>

<!-- <c:forEach items="${menus}" var="m"> -->
<!--             {id:'${m.mid}',text:'${m.mname}',href:'${m.murl}'}, -->
<!--         </c:forEach> -->

</head>

<body>
<script type="text/javascript"
    src="${pageContext.request.contextPath}/Js/tablejs/highcharts.js"></script>
    
    This is my JSP page.
    <div id="container" style="min-width:50px;height:400px;"></div>
    <br>
</body>
</html>

 

效果如下图：

 

posted @ 2017-04-25 13:41  Tylerman  阅读(5061)  评论(0)  编辑  收藏  举报