HighCharts终极版本

最新推荐文章于 2024-05-13 19:07:05 发布
最新推荐文章于 2024-05-13 19:07:05 发布
阅读量141 收藏
点赞数
文章标签： java json javascript ViewUI 
<%@ 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>

 

weixin_33795743
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Highcharts商业授权
02-23 1272
ECharts 对比 Highcharts 使用教程
leva的博客
02-07 1550
Highcharts是用JavaScript编写的图表库，支持各种常用的可视化。作为同类可视化产品，ECharts与Highcharts的对比如下。
2024年前端最新Vue：使用highCharts(1)，web前端界面开发工具
最新发布
2401_84418883的博客
05-13 567
本人分享一下这次字节跳动、美团、头条等大厂的面试真题涉及到的知识点，以及我个人的学习方法、学习路线等，当然也整理了一些学习文档资料出来是给大家的。知识点涉及比较全面，包括但不限于前端基础，HTML，CSS，JavaScript，Vue，ES6，HTTP，浏览器，算法等等开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】},data() {return {},// 请求数据},return {chart: {style: { // 配置翻页颜色},
纯JavaScript编写的图表库Highcharts v7.1.0发布，带来全新的图表类型
weixin_33816821的博客
04-04 194
Highcharts是一款纯JavaScript编写的图表库，为你的Web网站、Web应用程序提供直观、交互式图表。当前支持折线、曲线、区域、区域曲线图、柱形图、条形图、饼图、散点图、角度测量图、区域排列图、区域曲线排列图、柱形排列图、极坐标图等几十种图表类型。 下载Highchart最新版本 我们很高兴地宣布Highcharts 7.1，这是业界领先的JavaScript图表库系列的最新更新，包...
highcharts问题相关
yunsyz的专栏
02-25 927
最近一直在用highcharts做图形展现，经历了各种问题，从中也获取了一些经验，在这儿列出，方面以后查询。 1.要使用highcharts需要加入哪些资源？ highcharts下载下来后的文件目录是这样的： 只需要js这个文件夹就行了。所以引入到jsp页面的内容是： /resources/js/jquery-1.9.1.js"> /resources/Highchar
HighCharts三个版本 4.03-4.1.8-5.0.14
09-14
HighCharts中的三个版本，分别为HighCharts-4.0.3、HighCharts-4.1.8、HighCharts-5.0.14完整，亲测可用。配合 web前端使用
Highcharts
06-14
Highcharts是一款强大的JavaScript图表库...在下载的Highcharts-6.1压缩包中，你将找到不同版本和语言的资源，包括文档、示例代码以及必要的JavaScript和CSS文件，这将帮助你快速上手并开始创建自己的数据可视化应用。
highcharts小demo
07-20
highcharts小demo
highcharts
10-22
Highcharts 系列软件包含 Highcharts JS，Highstock JS，Highmaps JS 共三款软件，均为纯 JavaScript 编写的 HTML5 图表库，全部源码开放，个人及非商业用途可以任意使用及源代码编辑。
HighCharts
09-14
Highcharts 是一个用纯JavaScript编写的一个图表库， 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表，并且免费提供给个人学习、个人网站和非商业用途使用。HighCharts支持的图表类型有曲线图、区域图...
java不同方式方式导入导出数据
c_molione的博客
07-12 662
方法一： 根据easypoi 实现导入导出 导入： 前端部分： <div style="vertical-align:top;padding-left:5px; position: relative; display:inline"> <input id="excle" type="file" class="btn"/> ...
html常用的几个重定向连接示例代码
12-14
复制代码代码如下: [removed].href=”zcbfH.jsp”;//在本框架中重定向 onclick=”top.mainFrame.location='<%=path %>/login.jsp'”；//从某个框架中重定向到mainFrame框架中 onclick=”top.[removed]='<%=path %>/login.jsp'”//从某个框架中重定向到整个页面中
jquery 创建遮盖层 示例代码
deng11342的专栏
07-11 887
/* 半透明的遮罩层 */ #overlay { background: #000; filter: alpha(opacity=50); /* IE的透明度 */ opacity: 0.5; /* 透明度 */ display: none; position: absolute; top: 0px; le
tab切换
tanxuefeng11的专栏
01-31 847
html xmlns="http://www.w3.org/1999/xhtml"> head> meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> title>选项卡title> style type="text/css"> body{ text-align:center; } .tab1, .tab2
图表Highcharts发布最新版本9.1，新增五个技术指标
RoffeyYang的博客
06-09 161
Highcharts是一款纯JavaScript编写的图表库，为你的Web网站、Web应用程序提供直观、交互式图表。当前支持折线、曲线、区域、区域曲线图、柱形图、条形图、饼图、散点图、角度测量图、区域排列图、区域曲线排列图、柱形排列图、极坐标图等几十种图表类型。 点击下载Highcharts最新试用版 我们很自豪地宣布新的主要Highcharts 版本 9.1，包括对我们的 Stock 产品的升级（查看更新日志了解更多详细信息）： 1. 新的技术指标 我们很高兴在现有的技术指标列表中添加五个新的技术指标：
Highcharts热力图的JS代码详细分析（一）
qq_37257659的博客
08-16 3841
Highcharts.chart('container', { chart: { type: 'heatmap', marginTop: 40, marginBottom: 80, plotBorderWidth: 1 }, ...
JavaScript图表库Highcharts更新至7.2.1版本，新版本抢先看！
juejuexiaozhu的博客
11-25 308
Highcharts是一款纯JavaScript编写的图表库，为你的Web网站、Web应用程序提供直观、交互式图表。当前支持折线、曲线、区域、区域曲线图、柱形图、条形图、饼图、散点图、角度测量图、区域排列图、区域曲线排列图、柱形排列图、极坐标图等几十种图表类型。 Highcharts Basic v7.2.1更新内容： 添加了新的辅助功能选项，具有更大的灵活性，可自定义隐藏的屏幕阅读器区域。 ...
zhsq bug修改
xiaoxik的博客
08-02 714
1、房屋按显示全名（从父节点到子节点）并按全名检索 xml修改： 查询条件修改： list.jsp修改

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值