这是用json的格式传送数据，所以要添加jar包如下：
commons-beanutils-1.7.0.jar
commons-collections-3.2.jar
commons-lang-2.4.jar
commons-logging-1.0.4.jar
ezmorph-1.0.3.jar
json-lib-2.2.3-jdk15.jar
<!-- 这个是页面显示的代码 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="refresh" content="20"> <!-- 这个是每个20秒刷新一次本页面-->
<title>闸口监控表</title>
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<style type="text/css">
#container {
height: 400px;
min-width: 310px;
max-width: 800px;
margin: 0 auto;
}
</style>
<script type="text/javascript">
var chart;
var mode;
$(document).ready(function() {
$.ajax({
type:"post",
url:"ExportAction",
success:function(data){
var json=eval('('+data+')'); //把传过来的字符串改为json格式
//把json里面的数据取出来拼接成字符串
mode="colorByPoint: true,"+
" data: [{"+
" y: "+json.one+","+
" }, {"+
" y:"+json.two+","+
" }, {"+
" y: "+json.three+",}]"
getDate(mode);
}
});
function getDate(mode) {
//这个是json格式的柱形图报表
$('#container').highcharts({
chart: {
type: 'column',
options3d: {
enabled: true,
alpha: 15,
beta: 15,
viewDistance: 25,
depth: 40
},
marginTop: 80,
marginRight: 40
},
title: {
text: '闸口监控数量动态条形表'
},
xAxis: {
categories: ['收货货量', '收货积压', '收货错误']
},
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: '商品的数量(件)'
}
},
/* tooltip: {
headerFormat: '<span style="font-size:11px"></span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>件</b><br/>'
} */
tooltip: {
headerFormat: '<b>{point.key}</b><br>',
pointFormat: '<span style="color:{series.color}">\u25CF</span> {series.name}: {point.y} ' //point是用来显示百分形式的 可以
//把{series.name}: {point.y} 改为<b>件</b>
} ,
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
}
},
/*
column: {
stacking: 'normal',
depth: 40
} */
},
series:eval("[{"+mode+"}]"), //拼接好了在这里eval显示出来
});
}
});
</script>
</head>
<body onload="opener.location.reload()"><!--开窗时刷新 -->
<script type="js/data.js"></script>
<script src="js/highcharts.js"></script>
<script src="js/highcharts-3d.js"></script>
<div id="container" style="height: 400px"></div>
</body onUnload="opener.location.reload()"> <!--关闭时刷新-->
</html>>//下面是后台用json的格式传到页面的代码
response.setCharacterEncoding("utf-8");
response.setContentType("json/html");
System.out.println("进来没有？？？");
JSONObject number=null;
number=new JSONObject();
//每隔一段时间都会有三个值
Num n=new Num();
n.setOne(40);
n.setTwo(80);
n.setThree(1600);
number.put("data",n);
PrintWriter out=response.getWriter();
out.print(number.fromObject(n));
out.flush();
out.close();最后的效果图是
二维的柱形图
页面的代码
<title>报表柱形图</title>
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<style type="text/css">
${demo.css}
</style>
<script type="text/javascript">
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: '闸口监控表'
},
xAxis: {
type: 'category'
},
yAxis: {
title: {
text: '数量(件)'
}
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>件</b><br/>'
},
series: [{
colorByPoint: true,
data: [{
name: "货物积压",
y: eval(11),
}, {
name: "货物出错",
y: eval(56),
}, {
name: "货物损失",
y: eval(45),
}]
}],
});
});
</script>
</head>
<body>
<script src="js/highcharts.js"></script>
<script src="js/data.js"></script>
<div id="container" style="min-width: 100px; height: 450px; margin: 0 auto"></div>
</body>
</html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- <meta http-equiv="refresh" content="16660">-->
<title>闸口监控表(可以根据数值改变颜色来)</title>
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<style type="text/css">
#container {
height: 400px;
min-width: 310px;
max-width: 800px;
margin: 0 auto;
}
</style>
<script type="text/javascript">
//主要代码
var chart;
var mode,mode1,mode2,mode3;
$(document).ready(function() {
var color = ["red","green"];
$.ajax({
type:"post",
url:"ExportAction",
success:function(data){
var json=eval('('+data+')');
/* 变色操作 */
if(json.one<1000){
mode1="data:[{ color: '#00FF00',y:"+json.one+"},"
}else if(json.one<2000){
mode1="data:[{color: '#E66505',y:"+json.one+"},"
}else {
mode1="data:[{color: '#CC0000',y:"+json.one+"},"
}
if(json.two<1000){
mode2="{color: '#00FF00',y:"+json.two+"},"
}else if(json.two<2000){
mode2="{color: '#E66505',y:"+json.two+"},"
}else{
mode2="{color: '#CC0000',y:"+json.two+"},"
}
if(json.three<1000){
mode3="{color: '#00FF00',y:"+json.three+"}]"
}else if(json.three<2000){
mode3="{color: '#E66505',y:"+json.three+"}]"
}else{
mode3="{color: '#CC0000',y:"+json.three+"}]"
}
/* 这是一种颜色 */
/* mode="colorByPoint: true,"+
" data: [{"+
" y: "+json.one+","+
" }, {"+
" y:"+json.two+","+
" }, {"+
" y: "+json.three+",}]" */
mode=mode1+mode2+mode3; //在这里拼接完成，然后同上面的一样直接传mode过去
getDate(mode);
}
});
mode="name: '流量'"+
" data: [{"+
" name: "+data.onenumber+","+
" y: "+data.one+","+
" drilldown: "+data.onenumber+","+
" }, {"+
" name: "+data.twonumber+","+
" y: "+data.two+","+
" drilldown: "+data.twonumber+","+
" }, {"+
" name: "+data.threenumber+","+
" y: "+data.three+","+
" drilldown: "+data.threenumber+","+
" }, {"+
" name: "+data.fournumber+","+
" y: "+data.four+","+
" drilldown: "+data.fournumber+","+
" }, {"+
" name: "+data.fivenumber+","+
" y: "+data.five+","+
" drilldown: "+data.fivenumber+","+
" }, {"+
" name: "+data.sixnumber+","+
" y: "+data.six+","+
" drilldown: "+data.sixnumber+","+
" }, {"+
" name: "+data.sevennumber+","+
" y: "+data.seven+","+
" drilldown: "+data.sevennumber }]"