最近在用HighCharts画趋势图,如果按照设计文档上来画那太复杂了,于是根据自己多年的经验改动了设计文档,添加了highcharts的标示区,然而我也发现,最后一次画highchart趋势图还是在2年前,现在居然都不知道怎么画了(其实也不是不会画,只不过给的开发时间紧,而且我又是个急子,所以觉得加速完成,然而越急就越画不好,这点我离葛经理还差很远,所以要加强这方面的培训),熟悉之后才慢慢从它的API中解脱出来,下面贴代码吧:

$(function () {
$.fn.zTree.init($("#search_tree"), swhTreeObj);
initTable();
initDate();
$(".td-title").hide();
$("#dlg").dialog({
width: 340,
height: 410,
modal: true,
title: '检修单信息',
closed: true,
buttons: [{
text: '确定',
iconCls: 'icon-save',
plain: true,
handler: function () {
$("#dlg").dialog('close');
}
}]
});
});
var tid = "";
function query() {
$("#charts").empty();
var treeObj = $.fn.zTree.getZTreeObj("search_tree");
var node = treeObj.getSelectedNodes();
var selPortGrid = $('#selPort').combogrid('grid');
var selProjectGrid = $('#selProject').combogrid('grid');
var selPortGridData = selPortGrid.datagrid('getSelections');
var selProjectGridData = selProjectGrid.datagrid('getSelections'); var kssj = $("#kssj").val();
var jssj = $("#jssj").val(); var id = [];
for (var i = 0; i < selProjectGridData.length; i++) {
id.push(selProjectGridData[i].Id);
}
$.post('/AjaxSwitchAnalysis/QueryResult.cspx', {
switchmac: node[0].Mac,
projectid: id.join(','),
kssj: kssj,
jssj: jssj
}, function (obj) {
if (typeof obj != "undefined" && obj != null) {
var val = obj.data;
var timedata = [];
for (var n = 0; n < obj.repairData.length; n++) {
tid = obj.repairData[n].Id;
timedata.push({
color: '#E0ECFF',
from: convertToUTC(obj.repairData[n].BeginTime),
to: convertToUTC(obj.repairData[n].EndTime),
//zIndex: 3,
label: { text: obj.repairData[n].BeginTime + ' 到 ' + obj.repairData[n].EndTime + " 的检修工作", style: {
color: 'red'
}
},
events: {
click: function (e) {
$.getJSON('/AjaxSwitchRepair/GetDataById.cspx', { id: tid }, function (tval) {
$("#dlg").dialog('open');
$("#begintime").val(tval[0].BeginTime);
$("#endtime").val(tval[0].EndTime);
$("#content").val(tval[0].Content);
$("#reason").val(tval[0].Reason);
$("#operator").val(tval[0].Operator);
$("#device").val(tval[0].SwitchName);
$("#device").attr('title', tval[0].SwitchName);
});
}
}
});
} var charts = [];
//根据不同的项目类型进行项目分组
//遍历用户选中的所有项目
for (var k = 0; k < selProjectGridData.length; k++) {
var data = [];
var flag = false;
//遍历从后台返回的数据
for (var i = 0; i < val.length; i++) {
//判断项目类型是否是端口流量,如果是就要解析json数据
if (selProjectGridData[k].Id == val[i].Id) {
if (val[i].ProjectType != "json") {
data.push([convertToUTC(val[i].InspectDate), parseInt(val[i].Value)]);
} else {
//端口的计算已经在this的地方存到charts了,所以不能再把端口再push进charts,因此要加flag标识一下
flag = true;
//解析端口json数据
var json = $.parseJSON(val[i].Value);
for (var l = 0; l < selPortGridData.length; l++) {
data = [];
var name = "";
var f = false;
for (var m = 0; m < json.length; m++) {
if (selPortGridData[l].Port == json[m].name) {
data.push([convertToUTC(val[i].InspectDate), parseInt(json[m].value)]);
name = selPortGridData[l].Port;
}
}
//判断端口是否已经存在,如果存在就要添加进去(目的是为了画出线)
for (var s = 0; s < charts.length; s++) {
for (var t = 0; t < charts[s].length; t++) {
if (charts[s][t].name == name) {
f = true;
charts[s][t].data.push(data[0]);
break;
}
}
}
if (!f) {
//this
charts.push([{ name: name, data: data, yAxis: 0}]);
}
}
}
}
}
if (!flag) {
charts.push([{ name: selProjectGridData[k].Name, data: data, yAxis: 0}]);
}
}
//判断要显示两个y轴还是一个y轴
if (charts.length == 2) {
$('<div id="container1" style="height: 400px;border-bottom:1px solid #95B8E7;border-top:1px solid #95B8E7;margin-bottom:20px;"></div>').appendTo("#charts");
for (var r = 0; r < charts[1].length; r++) {
charts[1][r].yAxis = 1;
}
initTwoCharts("container1", charts[0].concat(charts[1]), timedata);
} else {
for (var j = 0; j < charts.length; j++) {
$('<div id="container' + j + '" style="height: 400px;border-bottom:1px solid #95B8E7;border-top:1px solid #95B8E7;margin-bottom:20px;"></div>').appendTo("#charts");
initCharts("container" + j, charts[j], timedata);
}
}
}
}, 'json');
} function convertToUTC(val) {
var year = val.split(' ')[0].split('-')[0];
var month = val.split(' ')[0].split('-')[1];
var day = val.split(' ')[0].split('-')[2]; var h = val.split(' ')[1].split(':')[0];
var m = val.split(' ')[1].split(':')[1];
var s = val.split(' ')[1].split(':')[2];
return Date.UTC(year, month, day, h, m, s);
} function initDate() {
var myDate = new Date();
$("#jssj").val(myDate.Format("yyyy-MM-dd"));
myDate.setMonth(myDate.getMonth() - 1);
$("#kssj").val(myDate.Format("yyyy-MM-dd"));
} //初始化datagrid
var initTable = function () {
$("#selProject").combogrid(selProjectObj);
}; //列表对象
var selProjectObj = {
panelWidth: 200,
multiple: true,
idField: 'Id',
textField: 'Name',
url: '/AjaxInspectProject/QueryProject.cspx',
method: 'get',
columns: [[
{ field: 'ck', checkbox: true },
{ field: 'Id', hidden: true },
{ field: 'Name', title: '项目名称', width: 80 }
]],
onCheck: function (index, row) {
if (row.ProjectType == "json" && row.Name == "端口流量") {
$(".td-title").show();
}
},
onUncheck: function (index, row) {
if (row.ProjectType == "json" && row.Name == "端口流量") {
$(".td-title").hide();
}
},
fitColumns: true
}; var selPortObj = {
panelWidth: 200,
multiple: true,
idField: 'Id',
textField: 'Port',
url: '/AjaxSwitcherPortInfo/QueryPortBySwitch.cspx',
queryParams: { switchmac: '' },
method: 'get',
columns: [[
{ field: 'ck', checkbox: true },
{ field: 'Id', hidden: true },
{ field: 'Port', title: '端口名称', width: 80 }
]],
fitColumns: true
}; function initCharts(id, data, timearea) {
$('#' + id).highcharts({
title: {
text: '巡检项目趋势图',
x: -20 //center
},
xAxis: {
//x轴为时间类型
type: 'datetime',
//设置x轴间隔时间为一天
tickInterval: 24 * 3600 * 1000,
labels: {
formatter: function () {
return Highcharts.dateFormat('%Y-%m-%d', this.value);
}
},
plotBands: timearea
},
yAxis: [{
min: 0,
title: {
text: '巡检值'
}
}],
tooltip: {
xDateFormat: '%Y-%m-%d %H:%M:%S'//鼠标移动到趋势线上时显示的日期格式
},
series: data,
//去掉highcharts.com链接
credits: {
enabled: false
}
});
} function initTwoCharts(id, data, timearea) {
$('#' + id).highcharts({
title: {
text: '巡检项目趋势图',
x: -20 //center
},
xAxis: {
type: 'datetime',
tickInterval: 24 * 3600 * 1000,
labels: {
formatter: function () {
return Highcharts.dateFormat('%Y-%m-%d', this.value);
}
},
plotBands: timearea
},
yAxis: [{
min: 0,
title: {
text: '巡检值'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
}, {
opposite: true,
min: 0,
title: {
text: '巡检值'
},
plotLines: [{
value: 0,
width: 1,
color: 'red'
}]
}],
tooltip: {
xDateFormat: '%Y-%m-%d %H:%M:%S'//鼠标移动到趋势线上时显示的日期格式
},
series: data,
//去掉highcharts.com链接
credits: {
enabled: false
}
});
} //------------------------------------------------------------
var swhTreeObj = {
check: {
enable: false
},
async: {
enable: true,
url: "/AjaxSwitchDynamicInfo/GetSwitchSearchTree.cspx",
autoParam: ["id", "name=n"],
otherParam: { "type": "switchport" }
},
data: {
simpleData: {
enable: true,
idKey: "id",
pIdKey: "pId",
rootPId: 0
}
},
callback: {
onClick: onClickCheckEvent
}
}; function onClickCheckEvent(e, treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj(treeId);
zTree.checkNode(treeNode, !treeNode.checked, null, true);
if (treeNode.type == "switch") {
selPortObj.queryParams.switchmac = treeNode.Mac;
} else {
selPortObj.queryParams.switchmac = '';
}
$("#selPort").combogrid(selPortObj);
return false;
} /**
* 日期时间格式化方法,
* 可以格式化年、月、日、时、分、秒、周
**/
Date.prototype.Format = function (formatStr) {
var week = ['日', '一', '二', '三', '四', '五', '六'];
return formatStr.replace(/yyyy|YYYY/, this.getFullYear())
.replace(/yy|YY/, (this.getYear() % 100) > 9 ? (this.getYear() % 100).toString() : '0' + (this.getYear() % 100))
.replace(/MM/, (this.getMonth() + 1) > 9 ? (this.getMonth() + 1).toString() : '0' + (this.getMonth() + 1)).replace(/M/g, (this.getMonth() + 1))
.replace(/w|W/g, week[this.getDay()])
.replace(/dd|DD/, this.getDate() > 9 ? this.getDate().toString() : '0' + this.getDate()).replace(/d|D/g, this.getDate())
.replace(/HH|hh/g, this.getHours() > 9 ? this.getHours().toString() : '0' + this.getHours()).replace(/H|h/g, this.getHours())
.replace(/mm/g, this.getMinutes() > 9 ? this.getMinutes().toString() : '0' + this.getMinutes()).replace(/m/g, this.getMinutes())
.replace(/ss/g, this.getSeconds() > 9 ? this.getSeconds().toString() : '0' + this.getSeconds()).replace(/S|s/g, this.getSeconds());
};

HighCharts画时间趋势图,标示区以及点击事件操作的更多相关文章

  1. 使用 amcharts 和 highcharts 绘制多曲线时间趋势图的通用方法

    工作中用到, 这里分享一下. 可以使用 amcharts 和 highcharts 在同一坐标中绘制多个对比曲线图. 当然, 对图形没有过多装饰, 可以参考 API 文档: highcharts:   ...

  2. 百度echarts扇形图每个区块增加点击事件

    效果图:操作人员要求 :我想看这个扇形图对应的 页面信息,给我加个链接跳转:原先的chart.js发现没有api,后来改用百度的echart.js <!DOCTYPE html> < ...

  3. Visio画UML类图、序列图 for Java

    参考文档: 1.百度搜索: 怎样用Visio 2007画C++类图 连接 https://jingyan.baidu.com/article/9f7e7ec07286e16f281554f7.html ...

  4. echarts雷达图点击事件

    最近看见别人问的问题,点击雷达图的拐点,获取点击数据的问题,直接上代码. echarts配置问题:https://www.douban.com/note/509404582/ <!doctype ...

  5. echarts雷达图点击事件 包含(2.x,3.85,4.02)测试

    最近看见别人问的问题,点击雷达图的拐点,获取点击数据的问题,直接上代码. echarts 2x 的点击事件 echarts配置问题:https://www.douban.com/note/509404 ...

  6. Highcharts 标示区曲线图;Highcharts 对数图表;Highcharts 时间间隔图表

    Highcharts 标示区曲线图 配置 使用 yAxis.plotBands 属性来配置标示区.区间范围使用 'from' 和 'to' 属性.颜色设置使用 'color' 属性.标签样式使用 'l ...

  7. 使用highcharts实现无其他信息纯趋势图实战实例

    使用highcharts实现无其他信息纯趋势图实战实例 Highcharts去掉或者隐藏掉y轴的刻度线yAxis : { gridLineWidth: 0, labels:{ //enabled:fa ...

  8. 使用Astah画UML类图经验总结

    从学习需求工程与UML开始,就开始接触到Astah这款软件,但是当时完全是为了对UML各种图的了解加深才使用了这款软件.当时画图,都是完全凭借自己想,并没有考虑实际情况,而且画的图都是很简单的,甚至有 ...

  9. Excel应该这么玩——7、我是预言家:绘制趋势图

    让我们先看一个场景:你是公司销售部的员工,你手里有公司最近几年的销售额相关的数据,经理希望你预测下个月的销售额.盯着一堆数据,你或许会想到画一张XY坐标图,然后将每个月份的销售额标定为一个坐标.但是下 ...

随机推荐

  1. DocumentManager 在标签位置显示气泡框 z

    关于DevExpress DockManager下的DocumentManager头部标签如何显示气泡框,类似Visual studio那样显示文件的路径,如下图所示,------- 方式很简单,从工 ...

  2. window与linux文件传输工具

    window与linux文件传输工具 [一般用于SecureCRT ssh中使用] 法一:直接用yum安装lrzsz(推荐) yum install lrzsz -y 注意:rhel安装完系统后 直接 ...

  3. jQuery.merge与concat的区别

    示例如下: s1="123"; s2="145"; s3 = $.merge(s1,s2);//s3="123",字符串s1 s2不变,默认 ...

  4. C/C++中内联(inline)函数的优点和缺点

    优点 缺点 1. 内联函数代码被放入符号表中,在使用时进行替换,和宏展开一样,效率很高: 1. 不允许过多的代码,代码过多的话会造成大的内存消耗,最好在5行以内: 2. 编绎器在调用一个内联函数,首先 ...

  5. 13个可实现超棒数据可视化效果的Javascript框架

    随着商业及其相关需求的发展,数据成为越来越重要的元素之一,为了更加直观和明显的展示商业潜在的趋势和内在的特性,我们需要使用图表和图形的方式来直观动态的展示数据内在秘密,在今天的这篇文章中我们推荐12款 ...

  6. JavaScript操作XML(二)

    上一篇介绍了XML的结构以及节点之间的关系这一篇介绍浏览器内建的XML解析器以及JavaScript是如何加载XML的. 大多数浏览器都有读取和操作 XML 的内建 XML 解析器. 解析器(XML ...

  7. HDOJ-3785 寻找大富翁(优先队列)

    寻找大富翁 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submi ...

  8. python3 把excel文件合并并保存到csv文件

    具体是这样,某路径下有很多 excel文件,文件名中包含相同关键字的是一类文件,把包含相同关键字的文件合并成一个文件,生成一个新的csv文件 # coding=utf-8 import xlrd im ...

  9. cygwin64安装wget和apt-cyg

    说实话,网上的教程要么不适用,要么不能用,唯有多次试错之后才杀出一条血路. 1.安装cygwin 2.勾选wget 这个如果忘记勾选了,就再次打开setup.exe,选择如下操作,即可. 然后点击下一 ...

  10. 连接SDE空间数据库——SQL Server篇

    一.软件配置 要从 ArcMap 连接至 SQL Server 中的数据库或地理数据库,请在 ArcMap 计算机上安装 SQL Server native client 或 Microsoft OD ...