zoukankan      html  css  js  c++  java
  • HighChars 之曲线报表和柱状报表

    第一章介绍了highchars 的基本情况和一个饼型报表。

    接下来我们做一个曲线报表和柱状报表,就当做一个代码的备份。具体的步骤就不说了。可以参见第一篇文章。

    代码如下:

    package com.highcharts;
    
    import java.io.IOException;
    
    import javax.servlet.ServletException;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    /**
     * line_base 报表 和柱状报表
     * */
    public class Line_basic extends HttpServlet {
    	 
    	private static final long serialVersionUID = 7255053394404579739L;
        /**
         * line_basic  曲线图报表
         * 把相应的数据在后台组装好,在前台显示就好。
         * 数据大小的x作标会相应的变化。
         */
    
    	@Override
    	protected void doGet(HttpServletRequest req, HttpServletResponse resp)
    			throws ServletException, IOException {
    		String categories="['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun','Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec','一','二','三','四','五','一']";
    		req.setAttribute("categories",categories);
    		System.out.println(categories);
    		
    		String dataString ="{name: 'Tokyo',data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6, 9.1,7.0, 6.9, 9.5, 14.5, 18.2]}," +
    							"{name: 'New York',data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5, 9.2,-0.2, 0.8, 5.7, 11.3,9.5 ]},"+  
    							"{name: 'Berlin',data: [-9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0, 9.3,-9, 0.6, 3.5, 8.4, 13.5]}, " +
    							"{name: 'London', data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8, 9.4,3.9, 4.2, 5.7, 8.5, 11.9]}";
    		req.setAttribute("data",dataString);
    		System.out.println(dataString);
    		req.getRequestDispatcher("/line_basic.jsp").forward(req,resp);
    	}
    
     
    	@Override
    	protected void doPost(HttpServletRequest req, HttpServletResponse resp)
    			throws ServletException, IOException {
    		this.doGet(req, resp);
    	}
    
    }
    

    web.xml

    <?xml version="1.0" encoding="UTF-8"?>
    <web-app xmlns="http://java.sun.com/xml/ns/j2ee"
    	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" version="2.4"
    	xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
    	<!-- 
    	<servlet>
    	 <servlet-name>jmsListener</servlet-name>
    	 <servlet-class>com.jms.topic.test.JmsReceiveTopicTest2</servlet-class>
    	 <load-on-startup>1</load-on-startup>
    	</servlet>
    	 -->
    
    	<!-- 线图 -->
    	<servlet>
    	 <servlet-name>line_basic</servlet-name>
    	 <servlet-class>com.highcharts.Line_basic</servlet-class>
    	</servlet>
    	<servlet-mapping>
    	 <servlet-name>line_basic</servlet-name>
    	 <url-pattern>/line_basic.do</url-pattern>
    	</servlet-mapping>
       <welcome-file-list>
        <welcome-file>index.jsp</welcome-file>
      </welcome-file-list>
    </web-app>
    

    展示 line_basic.jsp

    <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
    <%
    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%>">
        <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">    
     
        <script type="text/javascript" src="js/jquery.min.js"></script>  
    	<script type="text/javascript" src="js/highcharts.js"></script>  
    	<script type="text/javascript" src="js/exporting.js"></script>  
    
    <script type="text/javascript">
    $(function () {
        var chart;
        $(document).ready(function() {
            chart = new Highcharts.Chart({
                chart: {
                    renderTo: 'container',
                    type: 'line',
                    marginRight: 130,
                    marginBottom: 25
                },
                title: {
                    text: 'Monthly Average Temperature',
                    x: -20 //center
                },
                subtitle: {
                    text: 'Source: WorldClimate.com',
                    x: -20
                },
                xAxis: {
                    categories: ${categories}
                },
                yAxis: {
                    title: {
                        text: 'Temperature (°C)'
                    },
                    plotLines: [{
                        value: 0,
                         1,
                        color: '#808080'
                    }]
                },
                tooltip: {
                    formatter: function() {
                            return '<b>'+ this.series.name +'</b><br/>'+
                            this.x +': '+ this.y +'°C';
                    }
                },
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'top',
                    x: -10,
                    y: 100,
                    borderWidth: 0
                },
              // 可以不弹出提示 直接展示数据 开始
    	           plotOptions: {
    	                line: {
    	                    dataLabels: {
    	                        enabled: true
    	                    },
    	                    enableMouseTracking: false
    	                }
    	            },
                // 可以不弹出提示 直接展示数据 结束
                
                series: [${data}]
            });
        });
        
    });
    		</script>
    	</head>
    	<body>
    
    
    <div id="container" style="min- 400px; height: 400px; margin: 0 auto"></div>
    ${categories}<br/>
    ${data}
    	</body>
    </html>
    

    结果图:

    当加上 plotoptions 时,会有数据显示出来。而不会有弹出层。

    如果把类型改成:

    chart: {
      renderTo: 'container',
      type: 'column'
      }

    就把变成柱状图:



    具体的那些参数据可以按照示例修改。

  • 相关阅读:
    ....
    CodeForces 375A(同余)
    POJ 2377 Bad Cowtractors (最小生成树)
    POJ 1258 AgriNet (最小生成树)
    HDU 1016 Prime Ring Problem(全排列)
    HDU 4460 Friend Chains(bfs)
    POJ 2236 Wireless Network(并查集)
    POJ 2100 Graveyard Design(尺取)
    POJ 2110 Mountain Walking(二分/bfs)
    CodeForces 1059B Forgery(模拟)
  • 原文地址:https://www.cnblogs.com/java20130726/p/3218293.html
Copyright © 2011-2022 走看看