<%@ 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>