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 } });
}
1package com.xpec.gmtool.common.tool.graphic;
2
3import java.util.Arrays;
4
5import org.richfaces.json.JSONArray;
6import org.richfaces.json.JSONException;
7import org.richfaces.json.JSONObject;
8
9/** *//**
10 * @author Jia Xiaohui
11 *
12 */
13public 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對象 效果圖：
|