1.创建Java工程
js 插件引入
highcharts.js
jquery-1.8.3.min.js
myjs.js 引入ajax
2.前端代码
<%@ 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 page</title>
<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">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/highcharts.js"></script>
<script type="text/javascript" src="js/myjs.js"></script>
<script>
$(function () {
var jsonstr = '';
var xmlHttp = getXmlHttpRequest();
xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState==4 && xmlHttp.status==200){
{
jsonstr = eval("("+xmlHttp.responseText+")");
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: '游戏人物状态'
},
xAxis: {
categories: ['血量', '攻击', '防御'] //指定x轴分组
},
yAxis: {
title: {
text: 'something'
}
},
series:jsonstr
/* [{ //指定数据列
name: '奥特曼', //数据列名
data: [400, 32, 40] //数据
}, {
name: '怪兽boss',
data: [1000, 17, 25]
}] */
});
}
}
};
xmlHttp.open("get", "dataConverterServlet",true);
xmlHttp.send();
});
</script>
</head>
<body>
<div id="container" style="min-width:800px;height:400px;"></div>
</body>
</html>
3.后端代码：
public class DataConverterServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
response.setCharacterEncoding("utf-8");
PrintWriter out = response.getWriter();
String jString ="["
+ "{name: '奥特曼',data: [800, 32, 40]},"
+ "{name: '怪兽boss',data: [1000, 27, 25]}"
+ "]";
out.print(jString);//将文本传递到前端ajax
}
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doGet(request, response);
}
}。