客戶端：
<%@ 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(",", "");
}運行結果：
