zoukankan      html  css  js  c++  java
  • jquery.hichartTable.js插件绘图

    使用场景:随日期不断增长变化的数据用折线图表现出来更加直观,比如注册人数的增长等。
    在添加折线图之前,我们的数据是分页显示的表格,比如注册人数按日期分组统计:

    bigint(13)-Long-'1371810306320'-System.currentTimeInMillis()
    date(from_unixtime(substr(regist_time,1,10)))-date_format(from_unixtime(substr(regist_time,1,10)),'%y-%m')

    vachar(10)-String-'2013-11-14'-DateFormatUtils.format(System.currentTimeMillis(), "yyyy-MM-dd")-substr(day,3,5)


    引用依赖js,jquery.highchartTable.js依赖于highcharts.js和jquery.js
    <script type="text/javascript" src="${manager}/resources/js/jquery.min1.7.1.js"></script>
    <script type="text/javascript" src="${img}/resources/Highcharts-2.2.1/highcharts.js"></script>
    <script type="text/javascript" src="${basePath}/resources/js/jquery.highchartTable.js"></script>
    给分页表格添加属性,<table data-graph-container-before="1" data-graph-type="line" data-graph-tooltips="1"/>
    图标横坐标:<table><thead><tr><td>axis,表格标题行的第一列为横坐标
    部分系列忽略:<th data-graph-skip="1">,总计的行也需要忽略
    部分系列默认不显示图:<th data-graph-hidden="1">,可手动点击显示

    其他问题:
    数值格式化(如1,123.45)带来的绘图误差
    <td><fmt:formatNumber type="number" value="${orders.get(click[0].toString()).get('orderAmount')*0.01}" maxFractionDigits="2" groupingUsed="false"/></td>
    日期若作为横坐标会很挤,所以第一列显示了序号:<td><strong>${(pag.pageNo-1)*pag.pageSize+status.count}</strong></td>
    第二列才是日期,忽略掉:<th data-graph-skip="1"><a onclick="setOrderBy('dayth','dayth',${orderBy eq 'dayth' and asc})">日期</a></th>
    图中坐标点会提示横坐标,这时显示序号就不如日期合适了,所以修改jquery.highchartTable.js
    var xValues         = [];后面添加var xTooltips          = [];//添加一个提示数组
    xValues.push(cellValue);后面添加if($table.data("graph-tooltips")==1) xTooltips.push($td.next().text());//序号列后面跟着日期列
    修改var xValue = typeof xValues[this.point.x] != 'undefined' ? xValues[this.point.x] : this.point.x;
    var xValue = typeof xTooltips[this.point.x] != 'undefined' ? xTooltips[this.point.x] : (typeof xValues[this.point.x] != 'undefined' ? xValues[this.point.x] : this.point.x);
    至此提示已经由序号改为日期了













  • 相关阅读:
    Mybatis(spring)(多个参数)(插入数据返回id)
    乱码的情况
    struts2常用类型的Result
    struts2中的session使用
    linux查看端口占用程序
    webservice笔记
    Java读文件夹
    JSON笔记
    about Base64
    【转载】MyEclipse6.5 KeyGen
  • 原文地址:https://www.cnblogs.com/xingqi/p/3423092.html
Copyright © 2011-2022 走看看