最近蛋疼，觉得总是要查数据出图表麻烦，就搞了一个直接粘贴sql，出图表的页面，长得是下面这个样子

Paste_Image.png

说实话，highcharts和js我都不是高手，所以也有拿来练手的意思。

sql查询

这个没什么好说的，就是一个输入框，把sql搞进去，放到后台执行返回结果到前台。
由于前端的需要，需要对查询结果做一定的处理。

将行数据转换成列数据

sql评语查询返回的是行数据，因为highcharts的需要，每列数据应该是一个数组

for( Map data : queryResult ) { for ( Map.Entry entry : ( Iterable< Map.Entry > ) data.entrySet() ) { String key = ( String ) entry.getKey(); Object[] array = cache.get( key ); Object value = entry.getValue(); if ( array == null ) { array = new Object[]{}; columnInfo.put( key, isNumber( value ) ); } cache.put( key, ArrayUtils.add( array, value ) ); } }

区分列数值和非数值

上面代码中是isNumber方法用来判断该列的值是否为数值型，对于highcharts来说，只有数值弄可以当作数据来使用，非数值型只能用来统计

private boolean isNumber( Object o ) { return o instanceof Number; }

表格

表格的实现也很简单。
表头根据是否为数值型，显示不同的颜色，数值型为绿色，非数值型为蓝色。
非数值型表头点击，可以排序后进行，然后生成图表。
这里有些小算法：
对于排序的列，数据去重后用作图表中x轴的值(这也是为什么要排序。。。因为排序后容易去重)；
其它非数值型的列，以排序列为依赖，以数值列做计算，分类汇总，生成数据行(每个一个数组)。
最上面图中，date字段做排序，status字段共有4个值，在每个date里都有一个值，共生成4个数组

图表

使用的是highcharts，只用到了highcharts的最简单属性，还可以设置颜色神马的，以后有空再玩

    chart: {type: 'column'}, // 图表类型
    title: {text: '统计图'}, // 图表标题
    yAxis: {title: {text: '数量'}}, // y轴单位
    xAxis: {categories: ['2015/12/15','2015/12/15' .....]}, // x轴数据
    series: [
           {name:'status_1',data:[1,0,3,5....]},
           {name:'status_2',data:[1,0,3,5....]},
           ...
    ]// 数据行
}```