博客
关于我
强烈建议你试试无所不能的chatGPT，快点击我
转 jQuery插件Highcharts、flexigrid实践
阅读量：7081 次
发布时间：2019-06-28

本文共 9039 字，大约阅读时间需要 30 分钟。

jQuery有很多好用的插件，最近由于项目需要学习使用了Highcharts、flexigrid、jsTree三个插件：

  （一）  Highcharts是一个制作图表的纯Javascript类库，支持大部分的图表类型：直线图，曲线图、区域图、区域曲线图、柱状图、饼装图、散布 图；使用需要导入jquery.js,highcharts.js以及exporting.js，可以通过网站下载。

  

    Highcharts包括配置选项

   chart：{

           renderTo//放置图表的容器

           defaultSeriesType//图表类型line, spline, area, areaspline, column, bar, pie , scatter

           inverted: true//左右显示，默认上下正向

   }

   tooltip：{

        formatter:当鼠标悬置数据点时的提示

  }

   xAxis:{

      categories:值的列表eg.[1,2,3]

   }

  yAxis:{

     title：纵柱标题

     labels:纵柱标尺

   }

  title:{

      text:图标标题名

      style:标题样式

   }

   subtitle：{

   }

   legend：{}图例位置样式

   series接受的数据格式为json Array：[{},{},{}]具体对应yAxis

不再啰嗦直接上例子：

 

     $(document).ready(
   function() {
    chart = new Highcharts.Chart( {
     chart : {
      renderTo : 'container',
      margin : [ 80, 200, 60, 100 ],
      zoomType : 'xy'
     },
     title : {
      text : '合同  ${contractName} 数据分析',
      style : {
       margin : '10px 0 0 0' // center it
     }
     },
     subtitle : {
      text : '<ss:date name="startDate" format="yyyy-MM-dd HH:mm" />——<ss:date name="endDate" format="yyyy-MM-dd HH:mm" />',
      style : {
       margin : '10px 0 0 0' // center it
     }
     },
     xAxis : [ {
      categories : [ <ss:iterator value="dataList">'<ss:date name="statDate" format="MM-dd" />'  ,</ss:iterator> ]
     } ],
     yAxis : [  // Secondary yAxis
        {
         title : {
         text : '点击数',
         margin : 70,
         style : {
          color : '#4572A7'
         }
        },
        
        labels : {
         formatter : function() {
          return this.value + ' 次';
         },
         style : {
          color : '#4572A7'
         }
        }
       }, { // Tertiary yAxis
        title : {
         text : '曝光数',
         margin : 80,
         style : {
          color : '#AA4643'
         }
        },
        labels : {
         formatter : function() {
          return this.value + ' 次';
         },
         style : {
          color : '#AA4643'
         }
        },
        opposite : true,
        offset : 100
       },
       { // Primary yAxis
        labels : {
         formatter : function() {
          return this.value + '%';
         },
         style : {
          color : '#89A54E'
         }
        },
        title : {
         text : '点击率',
         style : {
          color : '#89A54E'
         },
         margin : 50
        },
        opposite : true
       }],
     tooltip : {
      formatter : function() {
       var unit = {
        '点击数' : '次',
        '曝光数' : '次',
        '点击率' : '%'
       }[this.series.name];
       return '' + this.x + ': ' + this.y + ' ' + unit;
      }
     },
     legend : {
      layout : 'vertical',
      style : {
       left : '30px',
       bottom : 'auto',
       right : 'auto',
       top : '10px'
      },
      backgroundColor : '#FFFFFF'
     },
     series : [
        {
        name : '点击数',
        color : '#4572A7',
        type : 'line',
        data : [ <ss:iterator value="dataList"><ss:property value="click" />,</ss:iterator> ]
       },
       
       {
        name : '曝光数',
        type : 'line',
        color : '#AA4643',
        yAxis : 1,
        
        data : [ <ss:iterator value="dataList"> <ss:property value="impressions" />,</ss:iterator> ]
       },
       {
        name : '点击率',
        color : '#89A54E',
        type : 'line',
        yAxis : 2,
        data : [ <ss:iterator value="dataList"> <ss:property value="clickRank" /> ,</ss:iterator>]
       } ]
    });
   });
   
 
Html中只需要适当位置加上<div id="container" ></div>即可。如果要显示网格式的风格再js中再加入下面代码：
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',
      lineColor: '#000',
      lineWidth: 1,
      tickWidth: 1,
      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'
         }           
      }
   },
   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);
 
 
你也可以自己按要求定义显示风格。
另外，要从服务器获取数据动态生成运行曲线，像心电图那样可以
配置chart:{

events:{

   load:requestData

  }

} ,

series: [{ name: '服务器数据', data: [] }]

方法:

chart.series[0].addPoint([x,y], true, shift);

var x=-10;
02 $(document).ready(function(){
03     chart = new Highcharts.Chart({
04         chart: {
05             renderTo: 'container',
06             defaultSeriesType: 'spline',
07             events: {
08                 load: requestData
09             }
10         },
11         tooltip:{
12             formatter: function() {
13                return ''+ this.series.name +'<br/>'+
14                 '时间 : '+ this.x +'<br/>'+
15                 '价格: '+ this.y;
16              }
17         },
18         title: {
19             text: '运行曲线'
20         },
21         xAxis: {
22             //type: 'linear',
23             //tickPixelInterval: 10,
24             maxZoom: 60*3,
25             min:0,
26             minPadding:0.2
27         },
28         yAxis: {
29             minPadding: 0.2,
30             maxPadding: 0.2,
31             title: {
32                 text: 'Value',
33                 margin: 80
34             }
35         },
36         series: [{
37             name: '服务器数据',
38             data: []
39         }//,{
40             //name:"fuww",
41             //data:[]
42         //}
43         ]
44     });
45 function requestData() {
46     $.ajax({
47         url: 'orderAuction.action',
48         success: function(point) {
49             var series = chart.series[0],
50             shift = series.data.length > 20;
51             var s=eval('('+point+')');
52             var y=s.initial.price;
53             var z=s.initial.change;
54             chart.series[0].addPoint([x,y], true, shift);
55             // call it again after one second
56            timett = setTimeout('requestData()', 1000);
57            //timett = setInterval(requestData,1000);
58         },
59         cache: false
60     });
61     x=x+10;
62 }
（二）jQuery插件flexigrid是像ext的DataGrid一样的活动表格插件，使用它首先要引入query.js,还要引入flexigrid.js和flexigrid.css
        看看插件中部分代码以及说明 
  1. if (t.grid)   
  2.             return false; // return if already exist   
  3.   
  4.         // apply default properties   
  5.         p = $.extend({   
  6.             height : 200, // flexigrid插件的高度，单位为px   
  7.             width : 'auto', // 宽度值，auto表示根据每列的宽度自动计算   
  8.             striped : true, // 是否显示斑纹效果，默认是奇偶交互的形式   
  9.             novstripe : false,   
  10.             minwidth : 30, // 列的最小宽度   
  11.             minheight : 80, // 列的最小高度   
  12.             resizable : true, // 是否可伸缩   
  13.             url : false, // ajax方式对应的url地址   
  14.             method : 'POST', // 数据发送方式   
  15.             dataType : 'xml', // 数据加载的类型   
  16.             checkbox : false,// 是否要多选框   
  17.             errormsg : '连接错误!',// 错误提示信息   
  18.             usepager : false, // 是否分页   
  19.             nowrap : true, // 是否不换行   
  20.             page : 1, // 默认当前页   
  21.             total : 1, // 总页面数   
  22.             useRp : true, // 是否可以动态设置每页显示的结果数   
  23.             rp : 15, // 每页默认的结果数   
  24.             rpOptions : [5,10, 15, 20, 25, 30, 40],// 可选择设定的每页结果数   
  25.             title : false,// 是否包含标题   
  26.             pagestat : '显示第 {from} 条到 {to} 条,共 {total} 条数据',// 显示当前页和总页面的样式   
  27.             procmsg : '正在处理,请稍候 ...',// 正在处理的提示信息   
  28.             query : '',// 搜索查询的条件   
  29.             qtype : '',// 搜索查询的类别   
  30.             nomsg : '没有数据存在!',// 无结果的提示信息   
  31.             minColToggle : 1, // 允许显示的最小列数   
  32.             showToggleBtn : true, // 是否允许显示隐藏列，该属性有bug设置成false点击头脚本报错   
  33.             hideOnSubmit : true,// 隐藏提交   
  34.             autoload : true,// 自动加载   
  35.             blockOpacity : 0.5,// 透明度设置   
  36.             onToggleCol : false,// 当在行之间转换时，可在此方法中重写默认实现，基本无用   
  37.             onChangeSort : false,// 当改变排序时，可在此方法中重写默认实现，自行实现客户端排序   
  38.             onSuccess : false,// 成功后执行   
  39.             onSubmit : false   
  40.               // 调用自定义的计算函数   
  41.           }, p);  
了解了每个属性的含义后就可以根据自己的需要来配置了，看我的实例：
 $("#flex1").flexigrid
   (
   {
        url:  './contract_getAllJsonData.action?startDate=<ss:date name="startDate" format="yyyy-MM-  dd"/>&endDate=<ss:date name="endDate" format="yyyy-MM-dd"/>&contractId=${contractId}',
   dataType: 'json',
   method: 'POST',
   colModel : [
    {display: '广告位', name : 'advName', width : 300, sortable : true, align: 'center'},
    {display: '开始投放时间', name : 'start', width : 180, sortable : true, align: 'left'},
    {display: '结束投放时间', name : 'end', width : 180, sortable : true, align: 'left'},
    {display: '点击数', name : 'clicks', width : 80, sortable : true, align: 'left'},
    {display: '曝光数', name : 'impressions', width : 80, sortable : true, align: 'left'},
    {display: '分析', name : 'impressions', width : 80, sortable : true, align: 'left'}
    ],
      sortname: "advName",
   sortorder: "asc",
   usepager: true,
   useRp: true,   
   title: '统计期间该合同广告位投放',
   showTableToggleBtn: true,
   width: 1000,
   height: 200
   }
 );  
后台java代码（struts2），由于框架不同代码有可能不同，我这里一次查出了所有需要数据，没有考虑分页，需要分页的话，请将page 等信息传入后来查询。
/**
  * 用于结合flexigrid实现可选表格
  * @return
  */
 public String getAllJsonData() {
  SimpleDateFormat formatter = new SimpleDateFormat("yyyy-MM-dd HH:mm");
  ContractReportService service = (ContractReportService) SpringHelper
  .getBean(TMG_REPORTS_CONTRACT);
  Map map = new HashMap();
  map.put("contractId", contractId);
  map.put("startdate", startDate);
  map.put("enddate", endDate);
  list = service.getAdvListbyContract(map);
  try {
  List mapList = new ArrayList();  
  for(int i = 0; i < list.size(); i++) { 
     Map cellMap = new HashMap(); 
     ContractReport cr = (ContractReport)list.get(i);
           cellMap.put("cell", new Object[] {cr.getAdvName(), formatter.format(cr.getStart()), formatter.format(cr.getEnd()), cr.getClicks(), cr.getImpressions(),"<img alt='分析' src='../image/analyse.gif'>"});    
           mapList.add(cellMap);  
  }
     Map pageInfo = new HashMap();     
     pageInfo.put("rows", mapList);
     JSONObject object = new JSONObject();  
     object.accumulateAll(pageInfo);
     Struts2Utils.getResponse().setContentType("text/x-json");
     Struts2Utils.getResponse().setCharacterEncoding("UTF-8");
     Struts2Utils.getResponse().setHeader("Cache-Control", "no-cache");
     Struts2Utils.getResponse().getWriter().write(object.toString());
     Struts2Utils.getResponse().getWriter().flush();
     Struts2Utils.getResponse().getWriter().close();
  } catch (IOException e) {
   e.printStackTrace();
  }
  return null;
 }
 最后上图（用highcharts和flexigrid实现）：
由于时间仓促，仅仅写了些皮毛，大家参考使用，详细使用方法还请参考官网。
 
转自：
仅供个人收藏
 

转载地址：http://groml.baihongyu.com/

你可能感兴趣的文章
objective C中数据持久化方式1--对象归档
查看>>
Python面向对象编程 - 一个记事本程序范例(一)
查看>>
马桶餐厅
查看>>
我对程序员技能的一些认识
查看>>
在linux下如何修改oracle的sys和system的密码
查看>>
【C语言】01-C语言概述
查看>>
mysql FullText全文索引的问题
查看>>
空格&nbsp在不同浏览器中显示距离不一致问题解决方法
查看>>
Dynamic CRM 2013学习笔记（八）过滤查找控件 （类似省市联动）
查看>>
iOS执行时与method swizzling
查看>>
SQL点滴21—几个有点偏的语句
查看>>
Android各种效果集合
查看>>
【转】Geary's C
查看>>
Linux中查看socket状态（转）
查看>>
public-private-protected-默认缺省 的区别
查看>>
React Native上手
查看>>
0919 - iPaste 上架 App Store
查看>>
iKcamp&掘金Podcast直播回顾（12月2号和9号的两场）
查看>>
Java简短知识点
查看>>
Hibernate第八篇【懒加载】
查看>>
喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！-- 愿君每日到此一游！
当前时间: 2025-02-08 09:03:17   当前IP: 3.138.37.123   联系邮箱:javaeecc@qq.com     Copyright © 2020 - 2022 baihongyu.com 京ICP备2021015314号-2
强烈建议你试试无所不能的CHAT-GPT，快点击我
强烈建议你试试无所不能的CHAT-GPT，快点击我