HighCharts终极版本
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html lang="zh">
<head>
<base href="<%=basePath%>">
<!-- jsp文件头和头部 -->
<%@ include file="../admin/top.jsp"%>
</head>
<body>
<div class="container-fluid" id="main-container">
<div id="page-content" class="clearfix">
<div class="row-fluid">
<div class="row-fluid">
<div id="container" style="min-width: 700px; height: 500px"></div>
<div id="main" style="width: 100%; height: 500px"></div>
<!-- 报表 -->
<table id="table_report"
class="table table-striped table-bordered table-hover center">
<thead>
<tr class="center">
<th>序号</th>
<th>网元</th>
<th>采集粒度</th>
<th>收到消息（receive）</th>
<th>获取数据（process 2）</th>
<th>转换数据（process 3）</th>
<th>存储数据（process 5）</th>
<th>入库完成（process 7）</th>
<th>总时间</th>
<th class="center">错误信息</th>
</tr>
</thead>
<tbody>
<!-- 开始循环 -->
<c:choose>
<c:when test="${not empty resultList}">
<c:forEach items="${resultList}" var="result" varStatus="res">
<tr class="center">
<td class='center' style="width: 30px;">${res.index+1}</td>
<td class="center"><a
href="task/pm_detail.do?pm_id=${PM_RESULT_ID} }">${result.NEID}</a></td>
<td class="center">${result.TIME_SPAN}</td>
<td class="center"><a style="cursor: pointer;"
target="mainFrame"
onclick="result(${result.PM_RESULT_ID},${res.index+1},'task/pm_detail.do?step=1')">${result.RECEIVE_REPORT_MSG_TIME}</a></td>
<td class="center"><a style="cursor: pointer;"
target="mainFrame"
onclick="result(${result.PM_RESULT_ID},${res.index+1},'task/pm_detail.do?step=2')">${result.PROCESS_GET_FILE_TIME}</a></td>
<td class="center"><a style="cursor: pointer;"
target="mainFrame"
onclick="result(${result.PM_RESULT_ID},${res.index+1},'task/pm_detail.do?step=3')">${result.PROCESS_PARSE_TIME}</a></td>
<td class="center"><a style="cursor: pointer;"
target="mainFrame"
onclick="result(${result.PM_RESULT_ID},${res.index+1},'task/pm_detail.do?step=5')">${result.PROCESS_STORE_TIME}</a></td>
<td class="center"><a style="cursor: pointer;"
target="mainFrame"
onclick="result(${result.PM_RESULT_ID},${res.index+1},'task/pm_detail.do?step=7')">${result.PROCESS_FINISH_TIME}</a></td>
<td style="width: 60px;" class="center">${result.TOTAL_TIME}</td>
<td style="width: 60px;" class="center"><a
style="cursor: pointer;" target="mainFrame"
onclick="result(${result.PM_RESULT_ID},${res.index+1},'task/pm_reslut_log.do?')">查看日志</a></td>
</tr>
</c:forEach>
</c:when>
<c:otherwise>
<tr class="main_info">
<td colspan="100" class="center">没有相关数据</td>
</tr>
</c:otherwise>
</c:choose>
</tbody>
</table>
</form>
</div> <!-- PAGE CONTENT ENDS HERE -->
</div>
<!--/row--> </div>
<!--/#page-content-->
</div>
<!--/.fluid-container#main-container--> <!-- 引入 -->
<script type="text/javascript">window.jQuery || document.write("<script src='static/js/jquery-1.9.1.min.js'>\x3C/script>");</script>
<script src="static/js/bootstrap.min.js"></script>
<script src="static/js/ace-elements.min.js"></script>
<script src="static/js/ace.min.js"></script>
<!-- 引入 --> <script type="text/javascript">
{
$(top.hangge()); //检索
function search(){
top.jzts();
$("#Form").submit();
} //删除
function del(taskId){
if(confirm("确定要删除?")){
top.jzts();
var url = '<%=basePath%>task/delete.do?taskId='+taskId;
$.get(url,function(data){
/* nextPage(${page.currentPage}); */
});
}
}
</script> <script type="text/javascript"> //全选 （是/否）
function selectAll(){
var checklist = document.getElementsByName ("ids");
if(document.getElementById("zcheckbox").checked){
for(var i=0;i<checklist.length;i++){
checklist[i].checked = 1;
}
}else{
for(var j=0;j<checklist.length;j++){
checklist[j].checked = 0;
}
}
} //批量操作
function makeAll(msg){ if(confirm(msg)){ var str = '';
for(var i=0;i < document.getElementsByName('ids').length;i++)
{
if(document.getElementsByName('ids')[i].checked){
if(str=='') str += document.getElementsByName('ids')[i].value;
else str += ',' + document.getElementsByName('ids')[i].value;
}
}
if(str==''){
alert("您没有选择任何内容!");
return;
}else{
if(msg == '确定要删除选中的数据吗?'){
top.jzts();
$.ajax({
type: "POST",
url: '<%=basePath%>task/deleteAll.do?tm='+new Date().getTime(),
data: {DATA_IDS:str},
dataType:'json',
//beforeSend: validateData,
cache: false,
success: function(data){
$.each(data.list, function(i, list){
/* nextPage(${page.currentPage}); */
});
}
});
}
}
} //导出excel
function toExcel(){
window.location.href='<%=basePath%>task/excel.do';
} //查看报表
function result(id,number,url){
top.mainFrame.tabAddHandler(id,"节点详细-"+number,url);
if(url != "druid/index.html"){
jzts();
}
}
</script> <script type="text/javascript">
var myChart;
myChart = echarts.init(document.getElementById('main')); var legendDate="";
var series="";
var ser="";
var legend="";
var option={};
$.ajax({
type: "post",
async: false, //同步执行
url: "",
dataType: "json", //返回数据形式为json
success: function (result) { },
error: function (errorMsg) {
legendDate = ["2014","2015","2016"];
series = [ { "name":"2014", "type":"bar", "data":[51, 2, 43],"len":"中国"} ,{ "name":"2015", "type":"bar", "data":[55, 36, 4] ,"len":"美国"},{ "name":"2016", "type":"bar", "data":[5, 20, 40],"len":"英国"}];
ser = [ { "name":"2014", "type":"bar", "data":[51, 2, 43]} ,{ "name":"2015", "type":"bar", "data":[55, 36, 4]},{ "name":"2016", "type":"bar", "data":[5, 20, 40]}];
legend = ["中国","美国","德国"];
optionSeries();
for(i=0;series.length>i;i++){
option.series[i]=series[i];
} }
}); function optionSeries(){
option = {
title: {
text: '性能数据采集入库效率趋势图'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: legendDate
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value',
boundaryGap: [0, 0.01]
},
yAxis: {
type: 'category',
data: legend
},
series: [ ]
};
} //通过Ajax获取数据 myChart.setOption(option);
</script> <script type="text/javascript">
var legendDate="";
var series="";
var ser="";
var legend="";
var option={};
function opSeries(){
option ={
title: {
text: '性能数据采集到入库关键节点处理效率报表'
},
xAxis: {
title: {
text: '网元采集粒度'
},
categories: legendDate
},
yAxis: {
title: {
text: '关键节点处理时间 (分钟)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
tooltip: {
valueSuffix: ' 分钟'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
credits: {
enabled: false
},
series: []
}
} $(function () {
$.ajax({
type: "post",
async: false, //同步执行
url: "",
dataType: "json", //返回数据形式为json
success: function (result) { },
error: function (errorMsg) {
legendDate = ["2014","2015","2016"];
series = [ { "name":"2014", "type":"bar", "data":[51, 2, 43],"len":"中国"} ,{ "name":"2015", "type":"bar", "data":[55, 36, 4] ,"len":"美国"},{ "name":"2016", "type":"bar", "data":[5, 20, 40],"len":"英国"}];
ser = [ { "name":"2014", "type":"bar", "data":[51, 2, 43]} ,{ "name":"2015", "type":"bar", "data":[55, 36, 4]},{ "name":"2016", "type":"bar", "data":[5, 20, 40]}];
legend = ["中国","美国","德国"];
//showChart();
opSeries();
for(i=0;series.length>i;i++){
console.log("highchart循环内i的值："+i);
option.series[i]=series[i];
console.log("option2.series["+i+"]--------"+"series["+i+"]："+series[i]);
}
}
});
$("#container").highcharts(option);
});
</script>
<style type="text/css">
li {
list-style-type: none;
}
</style>
<ul class="navigationTabs">
<li><a></a></li>
<li></li>
</ul>
</body>
</html>
HighCharts终极版本的更多相关文章
- js19--继承终极版本
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...
- day 50 jquary 终极版本
jQuary 一.jquary对象和dom对象 jquary找到的标签对象成为-- jquary对象 原生js找到的标签对象成为 -- dom对象 dom对象只能使用dom对象的方法,不能使用jque ...
- HighCharts绘制图表
<div id="TradeMoney"></div> <script> $(function () { initData(); }); fun ...
- 轻松搭建自己的Linux发行版本
许多人想要搭建自己的Linux发行版本,可能是觉得有趣,也可能是为了学习更多的Linux知识,或者因为他们有很正式的问题要解决.但是秘密是:自己搭建完美的发行版本不是很困难的一件事.事实上,我们收集了 ...
- JF厂V8版本爱彼AP15703，黄家橡树离岸型，超越N厂神器
根据调查的结果JF厂的爱彼AP15703几乎常年垄断了爱彼的市场,销量持续性的排在爱彼整个品牌中的第一位.JF厂这两年一直在攻克爱彼整个品牌,有了解的都知道 爱彼15703以前是N厂的五大复刻神器的代 ...
- 阿里正式发布《Java开发手册》终极版！
摘要: 本文讲的是阿里正式发布<Java开发手册>终极版!,别人都说我们是码农,但我们知道,自己是个艺术家.也许我们不过多在意自己的外表和穿着,但我们不羁的外表下,骨子里追求着代码的美.质 ...
- 有关HTML版本
先说说HTML的简史:从HTML1.0~2.0(1989~1991)>HTML3(1995)>HTML4(1998)>HTML4.01(1999)>XHTML1.0(2001) ...
- 框架----Django框架知识点整理
一.cbv cbv(class-base-view) 基于类的视图 fbv(func-base-view) 基于函数的视图 a.基本演示 urlpatterns = [ url(r'^login.ht ...
- 我的window10
前言 这个一时半会写不完,也比较耗费时间,留着以后,每周更新一些新的技巧. 折腾了3天多时间的成果——>window10 的全新桌面,不比苹果差!不要说 windows 不能用 mac . 既然 ...
随机推荐
- Android下setLatestEventInfo警告、Handler警告、SimpleDateFormat警告
正 文: 今天飘易在做Android 4.4.2下的APP开发时,使用了Notification下的setLatestEventInfo()方法时,Eclipse却提示:“ 不建议使用类型 Notif ...
- 【Github教程】史上最全github使用方法：github入门到精通
原文 http://www.eoeandroid.com/thread-274556-1-1.html git pull 命令 git pull <remote> <branch&g ...
- [GIT] Git 工作流程(Git flow, Github flow flow, Git lab flow)
reference : http://www.ruanyifeng.com/blog/2015/12/git-workflow.html Git 作为一个源码管理系统,不可避免涉及到多人协作. 协作必 ...
- xp局域网共享设置
xp在局域网内的每一台机子做以下一些设置:1.启用Guest(来宾)帐户:控制面板--用户帐户或者在管理工具--计算机管理--本地用户和组--右键Guest属性--去掉帐户已停用 前的勾.2.允许Gu ...
- Objective-C-Category类别
Object-C开发的时候有的时候会用到Category类,类似于Java和C#中扩展类,就是如果你觉得如果你觉得常用的方法在String中没有,可以根据业务需求和个人喜好写一个扩展类,然后在其中补充 ...
- 校验IPv4和IPv6地址和URL地址
1.校验IPV4地址: function validateIp(obj) { var ip=$(obj).val(); var re=/^(\d+)\.(\d+)\.(\d+)\.(\d+)$/;// ...
- 如何在Linux中发现IP地址冲突
导读 你们都知道什么是IP地址,是吧?它们被分配给网络上的设备来代表它们.它们通过DHCP服务器分配并且会经常改变.现在有两种IP地址.动态的一种会经常改变(几天一次),而静态的就如它的名字那样是静态 ...
- cognos report同比环比以及默认为当前月分析
现在的需求是按月份分析不同时期的余额数据,.(报表工具:cognos report:建模工具:FM) ------------------------------------------------- ...
- Escape字符总结
有如下的 escape字符. 对于十进制来说,\后面只涵盖3个字符,比如\1234,是\123和字符4. 但是对于十六进制,后面会涵盖四个字符,比如\x1234,后面的四个字符都在\的涵盖范围内.
- Http具体解释
一.Http是位于网络层的超文本传输协议. 我们用浏览器浏览网页就是用的http协议实现的. 二.Http请求详细分析 我们能够用httpwatch工具对http进行抓包分析 下面就是请求www.si ...