客戶端：發送ajax請求，獲取圖表數據
<%@ 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>amCharts examples</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/pie.js" type="text/javascript"></script>
<script>
var chartData = [];
var chart;
AmCharts.ready(function () {
// PIE CHART
chart = new AmCharts.AmPieChart();
chart.dataProvider = chartData;
chart.titleField = "factory_name";//橫座標
chart.valueField = "num";//縱座標
chart.outlineColor = "#FFFFFF";//最外面的線的顏色
chart.outlineAlpha = 0.8;
chart.outlineThickness = 2;
// WRITE
chart.write("chartdiv");
});
function loadStringData() {//發送ajax請求獲取數據
$.ajax({
type: "POST",
url: "/jk/run/factorysale/factorysale.action",
cache: false,
success: function(msg){
chart.dataProvider = msg;//把請求過來的數據給 dataProvider
chart.validateNow();
chart.validateData(); //刷新圖
},
});
}
setTimeout("loadStringData()", 100);//過100毫秒就發送請求給服務器獲取圖的數據
</script>
</head>
<body>
<div id="chartdiv" style="width: 100%; height: 400px;"></div>
</body>
</html>
服務器端：查詢數據庫，把查詢結果拼成字符串再用json格式返回
//廠家銷售情況餅狀圖
@ResponseBody
@RequestMapping(value="/run/factorysale/factorysale.action", method=RequestMethod.POST, produces="application/json;charset=UTF-8")
public String factorysale(){
String sql = "SELECT f.factory_name,cp.num FROM(SELECT factory_id,factory_name FROM factory_c) f RIGHT JOIN "
+ "(SELECT factory_id, COUNT(*) AS num FROM contract_product_c GROUP BY factory_id) cp ON f.factory_id=cp.factory_id";
List<Map<String, Object>> dataList = super.getJdbcTemplate().queryForList(sql);
StringBuffer sb = new StringBuffer("[");
for(Map map: dataList) {
sb.append(",").append("{\"factory_name\":").append("\""+map.get("factory_name")+"\"");
sb.append(",").append("\"num\":").append("\""+map.get("num")+"\"").append("}");
}
sb.append("]");
System.out.println(sb.toString().replaceFirst(",", ""));
return sb.toString().replaceFirst(",", "");
}結果：
看起來還不錯吧，ancharts使用簡單，一看就會，一個字，爽！
