用amcharts动态产生折线图

最新推荐文章于 2024-04-26 09:45:06 发布

雪飘雪融

最新推荐文章于 2024-04-26 09:45:06 发布

阅读量4.2k

点赞数 1

分类专栏： amcharts spring java ajax

本文链接：https://blog.csdn.net/qq_22498277/article/details/52516798

版权

java 同时被 3 个专栏收录

17 篇文章 0 订阅

订阅专栏

spring

14 篇文章 0 订阅

订阅专栏

ajax

4 篇文章 0 订阅

订阅专栏

客户端：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>折线图例子</title>
        <link rel="stylesheet" href="${pageContext.request.contextPath }/charts/style.css" type="text/css">
        <script src="${pageContext.request.contextPath }/charts/amcharts.js" type="text/javascript"></script>
        <script src="${pageContext.request.contextPath }/js/jquery.min.js" type="text/javascript"></script>
        <script src="${pageContext.request.contextPath }/charts/serial.js" type="text/javascript"></script>

        <script>
	    	var chartData = [];
            var chart;

            AmCharts.ready(function () {
            	chart = new AmCharts.AmSerialChart();
            	chart.dataProvider = chartData;//数据
            	chart.categoryField = "time";//横坐标

            	var graph = new AmCharts.AmGraph();
            	graph.valueField = "num";//纵坐标
            	graph.type = "line";//表示折线图
            	graph.fillAlphas = 0; // 或者删除这一行, 因为0是默认值
            	graph.bullet = "round";
            	graph.lineColor = "#8d1cc6";//线的颜色
            	graph.balloonText = "[[time]]: <b>[[value]]</b>";//添加气球
            	chart.addGraph(graph);
            	
            	var categoryAxis = chart.categoryAxis;
            	categoryAxis.autoGridCount  = true;
            	categoryAxis.gridCount = chartData.length;
            	categoryAxis.gridPosition = "start";
            	
            	categoryAxis.labelRotation = 90;
            	
            	
                // WRITE
                chart.write("chartdiv");
            });

            function loadStringData() {//从服务器段获取数据
				$.ajax({
				   type: "POST",
				   url: "/jk/run/systeminfo/systeminfo.action",
				   cache: false,
				   success: function(msg){
					 chart.dataProvider = msg;  
					 chart.validateNow();  
					 chart.validateData();  
				   },
				  error: function(XMLHttpRequest, textStatus, errorThrown) {
					
				  }
				});
			}
			setTimeout("loadStringData()", 100);
        </script>
    </head>

    <body>
        <div id="chartdiv" style="width: 100%; height: 400px;"></div>
    </body>

</html>

服务器端：

	//系统访问压力曲线图
	@ResponseBody 
	@RequestMapping(value="/run/systeminfo/systeminfo.action", method=RequestMethod.POST, produces="application/json;charset=UTF-8")
	 public String systeminfo(){
		String sql = "SELECT t.a1 as time,p.num FROM(SELECT a1 FROM on_line_t) t LEFT JOIN (SELECT SUBSTRING(login_time, 12,2) AS TIME, COUNT(*) AS num FROM login_log_p GROUP BY TIME) p ON t.A1 = p.time";
		List<Map<String, Object>> dataList = super.getJdbcTemplate().queryForList(sql);
		StringBuffer sb = new StringBuffer("[");
		for(Map map: dataList) {
			sb.append(",").append("{\"time\":").append("\""+map.get("time")+"\"");
			sb.append(",").append("\"num\":").append("\""+map.get("num")+"\"").append("}");
		}
		sb.append("]");
		return sb.toString().replaceFirst(",", "");
	}

运行结果：