HighCharts使用

這個是很多天之前做的了，當時上級要求做一個報表，內部用的小工具。其中要畫折線圖，柱狀圖這些。用了一下JFreeChart，圖是做出來了，但是這個效果很不好。直接生成了一張圖片展示出來，無法進行交互。百度一下，看到了highcharts，大家評論也不錯，生成的圖表很酷。

highcharts和easyui很像，都是通過json來傳遞數據，我們要做的，就是在后台封裝前端所需要的數據和格式。

這里說的是Highcharts中的HighStock這個工具，因為做時間圖的時候，數據非常多，HighCharts是無法實現那么多的，但是HighStock沒問題。

先上前端的代碼：

function querygraph(){
    $(function () { 
        var chart;
        var ground=$('#cc').combobox('getValue'); 
        var begin_time=$('#begin_time').datetimebox('getValue');
        var end_time=$('#end_time').datetimebox('getValue');
        $(function(){
            $.ajax({
                type:'POST',
                dataType:'JSON',
                url:'TimeGraph',
                data:"ground="+ground+"&begin_time="+begin_time+"&end_time="+end_time,
                beforeSend: ajaxLoading(),
                    success:function(result){
                        ajaxLoadEnd();
                        $('#container').highcharts('StockChart',{  
                        credits:{
                            enabled:false
                        },
                        rangeSelector : {
                                selected : 1
                            },
                            
                        title: { text: result.text, x: -20 }, 
                        
                        subtitle: {    text:result.subtitle, x: -20},
                        
                         plotOptions: { 
                             series:{
                                 turboThreshold:0
                             }
                         },
                         xAxis: {  
                                tickPixelInterval: 200,//x軸上的間隔  
                            //  title :{  
                            //      text:"title"  
                            //  },  
                                type: 'datetime', //定義x軸上日期的顯示格式  
                                labels: {  
                                formatter: function() {  
                                    return  Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.value); 
                                },  
                                align: 'center'  
                            }  
                            }, 
                        yAxis: { 
                            title: { text: '泊位數量' },
                            //min: 0, 
                            minorGridLineWidth: 0,
                            gridLineWidth: 0,
                            alternateGridColor: null,
                             plotBands: [{ // Light air 
                                 from: result.begin, to: result.total, 
                                 color: 'rgba(255, 0, 0, 0.7)',
                                 label: { 
                                     text: '總泊位數:'+result.total, 
                                     style: { color: '#606060' 
                                         } 
                             } }]
                             },
                        series : [{ 
                            name : '空余數量', 
                            data : result.series,
                            tooltip: { valueDecimals: 0 }
                        }]
                        
                    }); 
            }
            }
            );
        });
    });
    }

主要用的js代碼如上，其中首部聲明的變量是為了從easyui獲取字段數據的。

然后在ajax中請求url，獲取json數據。

比較麻煩的是后端數據拼裝了。

    public JSONObject getData(String begin_time,String end_time,String ground_code){
        logger.info("ground："+ground_code+"==");
        logger.info("begin:"+begin_time);
        logger.info("end:"+end_time);
        JSONObject result=new JSONObject();
        String ground_name=reportService.getGroundnameByid(Long.parseLong(ground_code));
        logger.info("groundname:"+ground_name);
        List<Report> list=reportService.getReport(Long.parseLong(ground_code), Timestamp.valueOf(begin_time), Timestamp.valueOf(end_time));
        //數據1,空閑數量
        JSONArray jsonArray2=new JSONArray();
        //數據2，全部
        long total=reportService.getTotalBerth(Long.parseLong(ground_code));
        for (int i = 0; i < list.size(); i++) {
            Report report=list.get(i);
            Date date=report.getRecord_time();
            long time=date.getTime();
            JSONArray jsonArray=new JSONArray();
            jsonArray.add(time);
            jsonArray.add(report.getAvailable_berth_number());
            jsonArray2.add(jsonArray);
        }
        result.put("text", ground_name+" 泊位統計圖");
        result.put("subtitle", begin_time+" 到 "+end_time+"之間的統計量");
        result.put("begin", total-0.5);
        result.put("total", total);
        result.put("series",jsonArray2);
        logger.info("result:"+result.toString());
        return result;
    }
    

其中，主要的數據是jsonArray2這個，這個類型是[[時間，數據],[時間，數據],...] 。時間是utc時間，如果前后台用的時間不一致的話，其中有一個不是utc時間，那么會造成時差八小時的問題，這個要統一。要么是前端禁用utc時間，要么后台時間也轉成utc時間。

效果圖如下：

除了這個工具，highcharts默認的那些都很好用，api里面說明也很多。

也做了一個柱狀圖，數據拼裝代碼如下：

    public JSONObject getData(String begin_time,String end_time,String ground){
        JSONObject result=new JSONObject();
        Timestamp begin=Timestamp.valueOf(begin_time);
        Timestamp end=Timestamp.valueOf(end_time);
        String ground_name=groundFlowService.getGroundNameById(Long.parseLong(ground));
        List<FlowDaily> list=groundFlowService.getGroundflow(Long.parseLong(ground), begin, end);
        JSONObject categories_json=new JSONObject();
        JSONObject series_json_in=new JSONObject();
        JSONObject series_json_out=new JSONObject();
        JSONArray series_jsonarray=new JSONArray();
        String[] cata=new String[list.size()];
        long[] data_int=new long[list.size()];
        long[] data_out=new long[list.size()];
        //駛入量
        series_json_in.put("name", "駛入量");
        series_json_out.put("name", "駛出量");
        for (int i = 0; i < data_int.length; i++) {
            FlowDaily flowDaily=list.get(i);
            data_int[i]=flowDaily.getIncount();
            data_out[i]=flowDaily.getOutcount();
            cata[i]=flowDaily.getStat_date().toString().substring(0, 10);
        }
        series_json_in.put("data", data_int);
        series_json_out.put("data", data_out);
        categories_json.put("categories", cata);
        series_jsonarray.add(series_json_in);
        series_jsonarray.add(series_json_out);
        result.put("text", ground_name+" 柱狀統計圖");
        result.put("subtitle", begin_time+" 到 "+end_time+"之間的統計量");
        result.put("categories", categories_json);
        result.put("series", series_jsonarray);
        /*拼接的結果格式
         * categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'] 
         *     series: [{ name: 'John', data: [5, 3, 4, 7, 2] }, 
                    { name: 'Jane', data: [2, -2, -3, 2, 1] }, 
                    { name: 'Joe', data: [3, 4, 4, -2, 5] }] */
        logger.info(result);
        return result;
    }