Highcharts JQuery 实时监控刷新图表(柱状图)
第一次发的是折线图,现在做了一个柱状图,代码基本上差不多,下面是前台代码,后台代码参考折线图文章:
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
Highcharts.setOptions({
global: {
useUTC: false
}
});
var chart;
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
type: 'column',
},
title: {
text: '10000号实时监控系统'
},
subtitle: {
text: '话务预测分析'
},
xAxis: {
categories: [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec'
]
},
yAxis: {
min: 0,
title: {
text: '数值'
}
},
legend: {
layout: 'vertical',
backgroundColor: '#FFFFFF',
align: 'left',
verticalAlign: 'top',
x: 50,
y: 20,
floating: true,
shadow: true
},
tooltip: {
formatter: function() {
return '技能组:'+
this.x +'</br>值:'+ this.y +' 个';
}
},
credits: {
enabled: false
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: '排班量'
}, {
name: '话务量'
}, {
name: '接通量'
}]
};
var url = "<%=basePath%>/singins.do?method=getDataToColumnJson";
$.ajax({
url: url,
type: "post",
cache: false,
dataType: "json",
data: {},
ifModified: false,
success: function(result){
var paiBan = [];
var huaWu = [];
var jieTong = [];
jQuery.each(result, function(m, obj) {
paiBan.push(
parseInt(obj.value0)
);
huaWu.push(
parseInt(obj.value1)
);
jieTong.push(
parseInt(obj.value2)
);
});
options.series[0].data = paiBan;
options.series[1].data = huaWu;
options.series[2].data = jieTong;
chart = new Highcharts.Chart(options);
}
});
});
});
window.returnValue='true';
</script>
</head>
<body>
<script src="<%=path%>/js/highcharts.js"></script>
<script src="<%=path%>/js/modules/exporting.js"></script>
<div id="container"
style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>
</html>