如何把数据以折线图的方式显示在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 pagetitle>
<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>





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>

 

效果如下图:

如何把数据以折线图的方式显示在jsp上_第1张图片

 

转载于:https://www.cnblogs.com/daxman/p/6761619.html

你可能感兴趣的:(数据库,java,javascript)