jquery.hichartTable.js插件绘图

使用场景：随日期不断增长变化的数据用折线图表现出来更加直观，比如注册人数的增长等。

jquery.hichartTable.js文档：http://pmsipilot.github.io/jquery-highchartTable-plugin/

在添加折线图之前，我们的数据是分页显示的表格，比如注册人数按日期分组统计：

---

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);

至此提示已经由序号改为日期了

来自为知笔记(Wiz)