highcharts 实现曲线报表
由于业务上的需求，网上找了不少例子，最终选择了highcharts 来实现曲线报表。下面我把个人心得与大家分享下：
如上图所示
X轴为整点时间轴
Y轴为数据坐标轴
该功能主要是检测当天 某时间检测到的数据。
代码如下所示：
Highcharts.setOptions({global:{useUTC : false}});
$(function(){
//声明报表对象
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container', // 报表显示在 页面位置 container 为 div 定义的属性
defaultSeriesType: 'spline', // 定义报表类型 例如：line ，spline ，colume
events: {
load: getForm //调用js 方法
}
},
title:{
text:'实时监测曲线图" //定义曲线报表 名称
},
xAxis: {
type: 'datetime', // 定义时间轴的 类型
maxPadding : 0.05,
minPadding : 0.05,
tickWidth:1,//刻度的宽度
lineWidth :1,//自定义x轴宽度
gridLineWidth :1,//默认是0，即在图上没有纵轴间隔线
lineColor : '#990000'
},
yAxis: {
max:12, // 定义Y轴 最大值
min:0, // 定义最小值
minPadding: 0.2,
maxPadding: 0.2,
tickInterval:1, // 刻度值
title: {
text: 'PH值'
},
// plotLines 表示为定义曲线报表中的 （刻度线）或者叫做（定义的区间范围）
// 一下为2条表示线
plotLines: [{
value: 6,
color: 'green',
dashStyle: 'shortdash',
width: 2,
label: {
text: '正常'
}
},{
value: 8,
color: 'green',
dashStyle: 'shortdash',
width: 2,
label: {
text: '正常'
}
}
}]
},
tooltip: { // 表示为 鼠标放在报表图中数据点上显示的数据信息
formatter: function() {
return '<b>'+'日期:' +'</b>'
+Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) +'<br/>'+
'<b>'+'<%=lbname%>:' +'</b>'+ this.y+' <%=shll%>';
}
},
series: [{
name: 'PH',
data: [] // 此处存放数据值 用,分开 例如：1.8,8.9,null,9.2, 如果在某一点数据为空
//可以用null 来表示
//如果是想动态扶植 这个位置 应该为空 即：data: []
}]
});
// 与后台进行数据交互
function getForm(){
jQuery.getJSON("test!test.do?id=123456", null, function(data) {
//为图表设置值
chart.series[0].setData(data);
});
}
//定时刷新 列表数据
$(document).ready(function() {
//每隔3秒自动调用方法，实现图表的实时更新
window.setInterval(getForm,50000);
});
});
//定义 曲线报表图 的样式
Highcharts.theme = {
colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655',
'#FFF263', '#6AF9C4'],
chart: {
backgroundColor: {
linearGradient: [0, 0, 500, 500],
stops: [
[0, 'rgb(255, 255, 255)'],
[1, 'rgb(240, 240, 255)']
]
},
borderWidth: 2,
plotBackgroundColor: 'rgba(255, 255, 255, .9)',
plotShadow: true,
plotBorderWidth: 1
},
title: {
style: {
color: '#000',
font: 'bold 16px "Trebuchet MS", Verdana, sans-serif'
}
},
subtitle: {
style: {
color: '#666666',
font: 'bold 12px "Trebuchet MS", Verdana, sans-serif'
}
},
xAxis: {
gridLineWidth: 1,
lineColor: '#000',
tickColor: '#000',
labels: {
style: {
color: '#000',
font: '11px Trebuchet MS, Verdana, sans-serif'
}
},
title: {
style: {
color: '#333',
fontWeight: 'bold',
fontSize: '12px',
fontFamily: 'Trebuchet MS, Verdana, sans-serif'
}
}
},
yAxis: {
//minorTickInterval: 'auto' // 此处会在Y轴坐标2点之前出现小格 所以就没有使用。
},
legend: {
itemStyle: {
font: '9pt Trebuchet MS, Verdana, sans-serif',
color: 'black'
},
itemHoverStyle: {
color: '#039'
},
itemHiddenStyle: {
color: 'gray'
}
},
labels: {
style: {
color: '#99b'
}
}
};
var highchartsOptions = Highcharts.setOptions(Highcharts.theme);
针对于此种情况的后台返回的参数如：[new DATE().gettime(),12] --->[时间，数据]
后台传值为：[[new DATE().gettime(),12] ,[new DATE().gettime(),10] ,[new DATE().gettime(),9] ]
根据查询返回的list
JSONArray array = new JSONArray();
array.addAll(list);
response.getWriter().println(array.toString());
返回 结果集到前台js中去
上图是实现的 月报表，主要是查询系统当前月每天的平均数的记录
sql：
select round(avg(jcsz), 2) jcsz ,mdate from ( select to_char(to_date(substr(z_date,1,10),'yyyy-mm-dd'), 'dd') mdate, jcsz from table where z_date like '%"2011-07-07"%' and cydd = '123456' ) a group by a.mdate order by mdate
如果某天数据不存在 则 需要补空 ‘null’
补空后台代码：
Set<Integer> set = new HashSet<Integer>();
for(int a =1 ; a<31 ; a++){
set.add(a);
}
for(int k:set){
boolean flag = false;
for(int i = 0 ; i<list.size() ; i++){
Test test = list.get(i);
int day = test.getInt("MDATE");
if(k==day){
map.put(k, bean.getStr("JCSZ"));
flag = true;
}
}
if(flag)
continue;
map.put(k, "null");
}
传map返回页面
request.setAttribute("map", map);
前台代码
var chart;
jQuery(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'spline'
},
title: {
text: "月监测曲线图",
x: -20
},
xAxis: {
maxPadding : 0.05,
minPadding : 0.05,
tickPixelInterval : 10,
tickWidth:5,//刻度的宽度
lineColor : '#990000',//自定义刻度颜色
lineWidth :1,//自定义x轴宽度
gridLineWidth :1,//默认是0，即在图上没有纵轴间隔线
categories: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15',
'16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30','31']
},
yAxis: {
max:12,
min:0,
minPadding: 0.2,
maxPadding: 0.2,
tickInterval:1,
title: {
text: 'test'
},
plotLines: [{
value: 150,
color: 'green',
dashStyle: 'shortdash',
width: 2,
label: {
text: '正常'
}
},
{
value: 1,
color: 'green',
dashStyle: 'shortdash',
width: 2,
label: {
text: '正常'
}
}]
},
tooltip: {
formatter: function() {
return '<b>'+ '第' +'</b>'+ this.x +' 天 : '+ this.y;
}
},
series: [ {
name: 'test',
data: [ <%
Map map = (Map)request.getAttribute("map");
Iterator it = map.entrySet().iterator();
String valuee =" ";
while (it.hasNext()) {
Map.Entry entry = (Map.Entry) it.next();
Object key = entry.getKey();
valuee+= entry.getValue()+",";
}
out.println(valuee);
%>
]
}]
});
});
Highcharts.theme = {
colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655',
'#FFF263', '#6AF9C4'],
chart: {
backgroundColor: {
linearGradient: [0, 0, 500, 500],
stops: [
[0, 'rgb(255, 255, 255)'],
[1, 'rgb(240, 240, 255)']
]
},
borderWidth: 2,
plotBackgroundColor: 'rgba(255, 255, 255, .9)',
plotShadow: true,
plotBorderWidth: 1
},
title: {
style: {
color: '#000',
font: 'bold 16px "Trebuchet MS", Verdana, sans-serif'
}
},
subtitle: {
style: {
color: '#666666',
font: 'bold 12px "Trebuchet MS", Verdana, sans-serif'
}
},
xAxis: {
gridLineWidth: 1,
lineColor: '#000',
tickColor: '#000',
labels: {
style: {
color: '#000',
font: '11px Trebuchet MS, Verdana, sans-serif'
}
},
title: {
style: {
color: '#333',
fontWeight: 'bold',
fontSize: '12px',
fontFamily: 'Trebuchet MS, Verdana, sans-serif'
}
}
},
yAxis: {
//minorTickInterval: 'auto'
},
legend: {
itemStyle: {
font: '9pt Trebuchet MS, Verdana, sans-serif',
color: 'black'
},
itemHoverStyle: {
color: '#039'
},
itemHiddenStyle: {
color: 'gray'
}
},
labels: {
style: {
color: '#99b'
}
}
};
var highchartsOptions = Highcharts.setOptions(Highcharts.theme);