<%@ 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="<%=basePath%>js/jquery-1.5.2.min.js"></script> <script type="text/javascript" src="<%=basePath%>js/highcharts.js"></script> </head> <body> <script type="text/javascript"> $(function() { var chart; $(document).ready(function() { var options = { chart: { renderTo: 'container',//图表的页面显示容器 defaultSeriesType: 'spline',//图表的显示类型(line,spline,scatter,splinearea bar,pie,area,column) marginRight: 125,//上下左右空隙 marginBottom: 25 //上下左右空隙 }, title: { text: '室内/室外温度实时采集图表',//主标题 x: -20 //center }, subtitle: { text: 'develop by:Sammy',//副标题 x: -20 //center }, xAxis: { //横坐标 }, yAxis: { title: { text: '温度' //纵坐标 }, plotLines: [{ //标线属性 value: 0, width: 1, color: 'red' }] }, tooltip: { //数据点的提示框 formatter: function() { //formatter格式化函数 return '<b>'+ this.series.name +'</b><br/>'+ this.y +'°C'; } }, legend: { layout: 'vertical', align: 'right', verticalAlign: 'top', x: -10, y: 100, borderWidth: 0 }, series: [] }; jQuery.get('http://localhost:8080/testChart/pp.do',function(data){ //var data = "{name: 'Tokyo',data: [[1283644800000,966],[1283731200000,2475],[1283817600000,3336],[1283904000000,1316]]},{name: 'New //York',data:[[1283644800000,433],[1283731200000,983],[1283817600000,1463],[1283904000000,1316]]}"; var data = eval("["+data+"]"); var da = eval("[{categories:['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']}]") options.xAxis=da[0]; for(var i=0;i<data.length-1;i++){ options.series.push(data[i]); } chart = new Highcharts.Chart(options); }); }); }) </script> <div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div> </body> </html>
?