题记:
原先是想用chart.js 这个轻量级来完成我的需求的,结果基于我的数据不规则,所以实现不了.
我的需求:
XX后台系统会产生有些报警日志.
我负责把这些数据按照图标的方式来展示.
这写报警日志,基于时间和报警值来展示.
时间不规则,而且要实时产生和更新我的图表.
这些数据都存在于数据库中.
好了.开始进入正题.
1.首先下载两个js,一个是jquery,另外一个就是Highcharts
下载的地址:
http://www.hcharts.cn/product/download.php
2.在你的页面中引入
<script src="js/jquery.js"></script>
<script src="js/highcharts.js"></script>
3 <script src="js/exporting.js"></script>
3. 建立一个DIV
<div id="container" style="min-width: 310px; height: 558px; margin: 0 auto"></div>
4. 编写js,用js初始化
当然在此之前,基于本土原因,加入了语言和时间设置
Highcharts.setOptions({
lang:{
contextButtonTitle:"图表导出菜单",
decimalPoint:".",
downloadJPEG:"下载JPEG图片",
downloadPDF:"下载PDF文件",
downloadPNG:"下载PNG文件",
downloadSVG:"下载SVG文件",
drillUpText:"返回 {series.name}",
loading:"加载中",
months:["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],
noData:"没有数据",
numericSymbols: [ "千" , "兆" , "G" , "T" , "P" , "E"],
printChart:"打印图表",
resetZoom:"恢复缩放",
resetZoomTitle:"恢复图表",
shortMonths: [ "Jan" , "Feb" , "Mar" , "Apr" , "May" , "Jun" , "Jul" , "Aug" , "Sep" , "Oct" , "Nov" , "Dec"],
thousandsSep:",",
weekdays: ["星期一", "星期二", "星期三", "星期三", "星期四", "星期五", "星期六","星期天"]
},
global : {
useUTC : false
}
});
数据要从后台取,所以在初始化属性的时候,不加数据列
var options = {
chart: {
renderTo:'container',
type:'spline',
},
title: {
text: '参数监控记录',
x: -20 //center
},
xAxis:{
type : 'datetime',
title : {
text : "采集时间"
},
dateTimeLabelFormats: {
millisecond:"%M:%S.%L",
second:"%H:%M:%S",
minute:"%d %H:%M",
hour:", %m-%d %H",
day:"%Y-%m-%d,%A",
week:"%A",
month:"%Y-%M",
year:"%Y"
},
labels : {
enabled : true,
step : 2,
//formatter : function(){
// return this.value;
//}
}
},
yAxis: {
title: {
text: '参数值'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}],
min : 0,
max : 100
},
series: [],
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.x:%y-%m-%d %H:%M:%S.%L} : {point.y:.2f}',
crosshairs: [{
width: 2,
color: 'green'
}, {
width: 2,
color: 'green'
}],
positioner: function() {
return {
x: 70,
y: 55
}
}
},
credits:{
enabled:true, // 版权信息
text:"XXXX有限公司",
href:"<%=basePath%>" + "home.do"
},
plotOptions: {
spline:{
dataLabels: {
enabled: true,
format : '{y:.2f}'
},
animation:false,
},
},
};
后台代码就是定时从后台取数据
//初始函数，设置定时器，定时取数据
$(function () {
queryData(0); var i=0;
var timer = setInterval(function(){
i++;
if(i>=3) {i=0;}
queryData(i);
},10000); //停止刷新
$("button").click(function(){
clearInterval(timer);
});
}); var categories = [];
var datas = []; //Ajax 获取数据并解析创建Highcharts图表
function queryData(index) {
$.ajax({
url:"getmonitorparamgroup.do?index=" + index,
type:'get',
dataType:"json",
success:function(data) { if (data === null) {
swal("无数据","","info");
return;
} //for(x in data){
//options.series[x].type = data[x].type;
//options.series[x].data = data[x].data;
options.series = data;
//} //$.each(data,function(i,n){
// categories[i] = n[1];
// datas[i] = n[2]*1;
//});
//options.xAxis.categories = categories;
//options.series[0].data = datas; chart = new Highcharts.Chart(options);
}
});
}
这是上面的前台代码.后台这接受请求.组建成一定的格式.把数据负责给series就好.