JSF + seam 使用 highchart 作图

JSF + seam 使用 highchart 作图

 jsf 页面代码

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< ui:composition  xmlns ="http://www.w3.org/1999/xhtml"
    xmlns:ui ="http://java.sun.com/jsf/facelets"
    xmlns:h ="http://java.sun.com/jsf/html"
    xmlns:f ="http://java.sun.com/jsf/core"
    xmlns:rich ="http://richfaces.org/rich"
    xmlns:a ="http://richfaces.org/a4j"
    xmlns:s ="http://jboss.com/products/seam/taglib"
    template ="../template/template.xhtml" >

     < ui:define  name ="right" >

<!-- highchart的js库 -->
         < script  src ="../js/js1/highcharts.js" ></ script >
<!-- 自己封装的调用highchart作图的js函数 -->
         < script  src ="../js/drawChart.js" ></ script >

<!-- 其它代码段略^_^ -->

                 < a:outputPanel  id ="chart" >
                     < rich:panel  header ="#{messages['operatingData.label.resultChart']}" >
                         < div  id ="highchartChart"  style ="width: 90%"   />
                         < script >
            generateChart('#{serverNumBrowse.chartTool.jsonData}');
         </ script >
                     </ rich:panel >
                 </ a:outputPanel >

<!-- 其它代码段略^_^ -->


     </ ui:define >
</ ui:composition >

serverNumBrowse是一个seam组件

EL表达式#{serverNumBrowse.chartTool.jsonData}表示获得serverNumBrowse组件的chartTool对象的jsonData属性，该属性是一个json数据格式的字符串

js代码如下：

function generateChart(data) {
    var barModel = eval('(' + data + ')');
    var width = jQuery(window).width();
    var height = jQuery(window).height();
    jQuery("#highchartChart").width(width / 1.3).height(height / 1.8);
    var options = {
        chart : {
            renderTo :'highchartChart',
            defaultSeriesType :barModel.type,
            borderWidth :2,
            borderColor :'#4572A7',
            zoomType:'xy'
        },
        title : {
            text :barModel.hctitle
        },
        plotOptions : {
            column : {
                pointPadding :0.8,
                borderWidth :0
            }
        },
        tooltip : {
            formatter : function() {
                return  this.y +' '+ this.x;
            }
        },
        xAxis : {
            categories :barModel.columnkeys
        },
        yAxis : {
            min :barModel.minData,
            max :barModel.maxData,
            allowDecimals :true,
            title : {
                text :barModel.yTitle
            }
        },
        series : []
    };
    var orgsLength = barModel.rowkeys.length;
    var dataArray = barModel.data;
    for ( var i = 0; i  <  orgsLength ; i++) {
        var dname  = barModel.rowkeys[i];
         options.series.push( {
            name :dname,
            data :dataArray[i]
 

  1  public   class  ChartModel {
  2 
  3       /*
  4       * 
  5        */
  6       private  String rowkeys[]  =   null ;
  7 
  8       /*
  9       * 
 10        */
 11       private  String columnkeys[]  =   null ;
 12 
 13       /*
 14       * 
 15        */
 16       private  String xTitle  =   null ;
 17 
 18       /*
 19       * 
 20        */
 21       private  String yTitle  =   null ;
 22 
 23       /*
 24       * 
 25        */
 26       private   int  intData[][]  =   null ;
 27 
 28       /*
 29       * 
 30        */
 31       private   double  doubleData[][]  =   null ;
 32 
 33       /*
 34       * 
 35        */
 36       private   long  longData[][]  =   null ;
 37 
 38       /*
 39       * 
 40        */
 41       private  String type  =   null ;
 42      
 43       /*
 44       * 
 45        */
 46       private   long [] pieData  =   null ;
 47 
 48       /**
 49       * 
 50        */
 51       public  ChartModel() {
 52      }
 53 
 54       public  String[] getRowkeys() {
 55           return  rowkeys;
 56      }
 57 
 58       public   void  setRowkeys(String[] rowkeys) {
 59           this .rowkeys  =  rowkeys;
 60      }
 61 
 62       public  String[] getColumnkeys() {
 63           return  columnkeys;
 64      }
 65 
 66       public   void  setColumnkeys(String[] columnkeys) {
 67           this .columnkeys  =  columnkeys;
 68      }
 69 
 70       public  String getXTitle() {
 71           return  xTitle;
 72      }
 73 
 74       public   void  setXTitle(String title) {
 75          xTitle  =  title;
 76      }
 77 
 78       public  String getYTitle() {
 79           return  yTitle;
 80      }
 81 
 82       public   void  setYTitle(String title) {
 83          yTitle  =  title;
 84      }
 85 
 86       public   int [][] getIntData() {
 87           return  intData;
 88      }
 89 
 90       public   void  setIntData( int [][] intData) {
 91           this .intData  =  intData;
 92      }
 93 
 94       public   double [][] getDoubleData() {
 95           return  doubleData;
 96      }
 97 
 98       public   void  setDoubleData( double [][] doubleData) {
 99           this .doubleData  =  doubleData;
100      }
101 
102       public  String getType() {
103           return  type;
104      }
105 
106       public   void  setType(String type) {
107           this .type  =  type;
108      }
109 
110       public   long [][] getLongData() {
111           return  longData;
112      }
113 
114       public   void  setLongData( long [][] longData) {
115           this .longData  =  longData;
116      }
117 
118       public   long [] getPieData() {
119           return  pieData;
120      }
121 
122       public   void  setPieData( long [] pieData) {
123           this .pieData  =  pieData;
124      }
125  }

       });
    }

  1 package  com.xpec.gmtool.common.tool.graphic;
  2
  3 import  java.util.Arrays;
  4
  5 import  org.richfaces.json.JSONArray;
  6 import  org.richfaces.json.JSONException;
  7 import  org.richfaces.json.JSONObject;
  8
  9 /** */ /**
 10 * @author Jia Xiaohui
 11 * 
 12 */
 13 public   class  ChartTool  {
 14
 15    /**//*
 16     * 
 17     */
 18    private String jsonData;
 19
 20    /**//*
 21     * 
 22     */
 23    private ChartModel model;
 24
 25    /**//*
 26     * 
 27     */
 28    public ChartTool() {
 29    }
 30
 31    /** *//**
 32     * @return
 33     * 
 34     */
 35    public String LoadData(boolean intFlag) {
 36        if (intFlag) {
 37            jsonData = intToJSON(model);
 38        } else {
 39            jsonData = doubleToJSON(model);
 40        }
 41        return jsonData;
 42    }
 43
 44    /** *//**
 45     * 
 46     * @return
 47     */
 48    public String LoadLongData() {
 49        jsonData = longToJSON(model);
 50        return jsonData;
 51    }
 52
 53    /** *//**
 54     * 
 55     * @return
 56     */
 57    public String LoadPieLongData() {
 58        jsonData = pieLongToJSON(model);
 59        return jsonData;
 60    }
 61
 62    /** *//**
 63     * 将chartmodel对象中的long型二维数组转为是个饼状图的json数据（饼状图较特殊）
 64     * @param chartModel
 65     * @return
 66     */
 67    private String pieLongToJSON(ChartModel chartModel) {
 68        JSONObject dataToJSON = new JSONObject();
 69        try {
 70            JSONArray rowKeys = new JSONArray(Arrays.asList(chartModel
 71                    .getRowkeys()));
 72            dataToJSON.put("rowkeys", rowKeys);
 73            dataToJSON.put("hctitle", chartModel.getXTitle());
 74            dataToJSON.put("type", chartModel.getType());
 75            long[] data = chartModel.getPieData();
 76            JSONArray jsonArray = new JSONArray();
 77            for (int i = 0; i < data.length; i++) {
 78                jsonArray.put(data[i]);
 79            }
 80            dataToJSON.put("pieData", jsonArray);
 81        } catch (JSONException e) {
 82            e.printStackTrace();
 83        }
 84        return dataToJSON.toString();
 85    }
 86
 87    /** *//**
 88     * 将chartmodel对象中的long型二维数组转为是个其他折线图或者柱状图的json数据
 89     * @param chartModel
 90     * @return
 91     */
 92    private String longToJSON(ChartModel chartModel) {
 93        JSONObject dataToJSON = new JSONObject();
 94        try {
 95            JSONArray rowKeys = new JSONArray(Arrays.asList(chartModel
 96                    .getRowkeys()));
 97            dataToJSON.put("rowkeys", rowKeys);
 98            JSONArray columnKeys = new JSONArray(Arrays.asList(chartModel
 99                    .getColumnkeys()));
100            dataToJSON.put("columnkeys", columnKeys);
101            dataToJSON.put("hctitle", chartModel.getXTitle());
102            dataToJSON.put("yTitle", chartModel.getYTitle());
103            dataToJSON.put("type", chartModel.getType());
104            long max = -1;
105            long min = 100000000;
106            long[][] data = chartModel.getLongData();
107            JSONArray jsonArray = new JSONArray();
108            for (int i = 0; i < data.length; i++) {
109                JSONArray array = new JSONArray();
110                for (int j = 0; j < data[i].length; j++) {
111                    array.put(data[i][j]);
112                    if (data[i][j] > max) {
113                        max = data[i][j];
114                    }
115                    if (data[i][j] < min) {
116                        min = data[i][j];
117                    }
118                }
119
120                jsonArray.put(array);
121            }
122            dataToJSON.put("data", jsonArray);
123            dataToJSON.put("maxData", max);
124            dataToJSON.put("minData", min);
125        } catch (JSONException e) {
126            e.printStackTrace();
127        }
128        return dataToJSON.toString();
129    }
130
131    /** *//**
132     * 将chartmodel对象中的double型二维数组转为是个其他折线图或者柱状图的json数据
133     * @param chartModel
134     * @return
135     */
136    private String doubleToJSON(ChartModel chartModel) {
137        JSONObject dataToJSON = new JSONObject();
138        try {
139            JSONArray rowKeys = new JSONArray(Arrays.asList(chartModel
140                    .getRowkeys()));
141            dataToJSON.put("rowkeys", rowKeys);
142            JSONArray columnKeys = new JSONArray(Arrays.asList(chartModel
143                    .getColumnkeys()));
144            dataToJSON.put("columnkeys", columnKeys);
145            dataToJSON.put("hctitle", chartModel.getXTitle());
146            dataToJSON.put("yTitle", chartModel.getYTitle());
147            dataToJSON.put("type", chartModel.getType());
148            double max = -1;
149            double min = 10000;
150            double[][] data = chartModel.getDoubleData();
151            JSONArray jsonArray = new JSONArray();
152            for (int i = 0; i < data.length; i++) {
153                JSONArray array = new JSONArray();
154                for (int j = 0; j < data[i].length; j++) {
155                    array.put(data[i][j]);
156                    if (data[i][j] > max) {
157                        max = data[i][j];
158                    }
159                    if (data[i][j] < min) {
160                        min = data[i][j];
161                    }
162                }
163
164                jsonArray.put(array);
165            }
166            dataToJSON.put("data", jsonArray);
167            dataToJSON.put("maxData", max);
168            dataToJSON.put("minData", min);
169        } catch (JSONException e) {
170            e.printStackTrace();
171        }
172        return dataToJSON.toString();
173    }
174
175    /** *//**
176     * 将chartmodel对象中的int型二维数组转为是个其他折线图或者柱状图的json数据
177     * @param chartModel
178     * @return
179     */
180    private String intToJSON(ChartModel chartModel) {
181        JSONObject dataToJSON = new JSONObject();
182        try {
183            JSONArray rowKeys = new JSONArray(Arrays.asList(chartModel
184                    .getRowkeys()));
185            dataToJSON.put("rowkeys", rowKeys);
186            JSONArray columnKeys = new JSONArray(Arrays.asList(chartModel
187                    .getColumnkeys()));
188            dataToJSON.put("columnkeys", columnKeys);
189            dataToJSON.put("hctitle", chartModel.getXTitle());
190            dataToJSON.put("yTitle", chartModel.getYTitle());
191            dataToJSON.put("type", chartModel.getType());
192            int max = -1;
193            int min = 10000;
194            int[][] data = chartModel.getIntData();
195            JSONArray jsonArray = new JSONArray();
196            for (int i = 0; i < data.length; i++) {
197                JSONArray array = new JSONArray();
198                for (int j = 0; j < data[i].length; j++) {
199                    array.put(data[i][j]);
200                    if (data[i][j] > max) {
201                        max = data[i][j];
202                    }
203                    if (data[i][j] < min) {
204                        min = data[i][j];
205                    }
206                }
207
208                jsonArray.put(array);
209            }
210            dataToJSON.put("data", jsonArray);
211            dataToJSON.put("maxData", max);
212            dataToJSON.put("minData", min);
213        } catch (JSONException e) {
214            e.printStackTrace();
215        }
216        return dataToJSON.toString();
217    }
218
219    public String getJsonData() {
220        return jsonData;
221    }
222
223    public ChartModel getModel() {
224        return model;
225    }
226
227    public void setModel(ChartModel model) {
228        this.model = model;
229    }
230
231    public void setJsonData(String jsonData) {
232        this.jsonData = jsonData;
233    }
234}
235

    chart  = new  Highcharts.Chart(options);
}

为highchart定制的ChartModel对象
  
转换json格式数据的ChartTool对象






效果图：