<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <html> <head> <title>Highcharts Example</title> <script type="text/javascript" src="<%=request.getContextPath() %>/script/jquery/jquery-1.5.1.min.js"></script> <script type="text/javascript" src="<%=request.getContextPath() %>/script/highcharts/highcharts.js"></script> <script type="text/javascript" src="<%=request.getContextPath() %>/script/highcharts/exporting.js"></script> <script type="text/javascript"> $(document).ready(function(){ var jsonXDate=[]; var jsonD1=[]; var jsonD2=[]; $.ajax({ url: '/testServlet?command=getScreens1', context: document.body, success: function(data){ var screenMap = $.parseJSON(data), screens = screenMap.screens; if(screens.length>0){ for(var i=0;i<screens.length;i++){ jsonXDate.push(screens[i].name); jsonD1.push(parseInt(screens[i].title)); } var chart; chart = new Highcharts.Chart({ chart: { renderTo: 'container', //zoomType: 'xy', //backgroundColor: '#CCCCCC', // borderWidth: '1', //borderRadius: '5', //plotBackgroundColor: '#DDDDDD', //plotBorderColor: '#EEEEEE', reflow: true, type: 'bar' //line, spline, area, areaspline, column, bar, pie , scatter }, title: { text: '柱状图' }, xAxis: { //categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'], categories: jsonXDate, lineWidth: 2, labels: { rotation: -45, //字体倾斜 align: 'right', style: { font: 'normal 13px 宋体' } } }, yAxis: { lineWidth: 2, title: { text : '得分' } }, tooltip: { formatter: function() { return '<b>'+ this.x +'</b><br/>'+this.series.name +': '+ Highcharts.numberFormat(this.y, 0); } }, plotOptions: { bar: { dataLabels: { enabled: true }, enableMouseTracking: true//是否显示title } }, series: [{ name: '成绩', //data: [80, 60, 70, 90] //data: [jsonD1[0], jsonD1[1], jsonD1[2], jsonD1[3]] data: jsonD1 },{ name: '次数', data: [50, 40, 70, 80] //data: jsonD1 }] }); } } }); }); </script> </head> <body> <div id="container" ></div> </body> </html>