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); Highcharts.setOptions({global:{useUTC : false}}