highcharts在richfaces下的实现
highcharts是优秀的javascript图表生成工具(http://highcharts.com/)，jQuery插件之一。其特点是功能强大，支持五大主流浏览器(ie,firefox,chrome,safari,opera)，简单易用。有很好的API(http://highcharts.com/ref)。缺点是商用收费。其基本应用请看网站上的demo。本文将展示它和richfaces的配合使用。
?
richfaces是jsf的一种实现。jboss出品。功能完善。缺点是当前版本3.3.3final还未完全支持jsf2，要等到今年2月的richfaces4 release后才能实现这个跨越。richfaces内嵌了jQuery并且实现了json(之所以提到json是因为纵然highcharts很炫，也要有米可炊，从后台将数据传递给前台js的工作要使用json。基本的richfaces操作json请看我的前一篇文章http://marshan.iteye.com/blog/867506)。
?
流程思路：
1.页面load时，使用a4j:jsFunction控件的action向java对象请求数据，提交异步form。
2.java对象查询并计算数据后，缓存到一个json对象中。
3.a4j:jsFunction控件的data获取java对象的缓存。
4.a4j:jsFunction控件的oncomplete触发一个js方法，将json对象解析，并赋值给js变量。
5.js方法生成一个highchart对象，并将上步的变量赋给该对象。
6.最后将highchart对象传递给一个页面对象--比如一个<div>。
?
具体实现：
1.使用jQuery响应页面加载完毕的事件。
jQuery(document).ready(function() { loadByJson();});?richfaces的js控件接收该请求，并提交异步表单。
<a4j:form id="asyncform"><a4j:jsFunction name="loadByJson" action="#{popularUtilization.loadChartData}" data="#{popularUtilization.jsonData}" ajaxSingle="true" ignoreDupResponses="true" oncomplete="updateData(data)"/></a4j:form>?
2.java部分代码(附件将不给出此部分，因为涉及商业秘密)
请求到数据赋给String类型的对象jsonData。
public void loadChartData() {...商业模型 barModel = 底层调用数据请求;jsonData = toJSON(barModel);...}}这里使用的JSON*都是richfaces提供的，没有使用第三方jar包。
其中的数组处理不是很好，我猜测是richfaces实现的问题(请参考http://community.jboss.org/message/580234#580234)
private String toJSON(BarChartModel chartModel) {JSONObject dataToJSON = new JSONObject();try {JSONArray rowKeys = new JSONArray(Arrays.asList(chartModel.商业数据1));dataToJSON.put("rowkeys", rowKeys);JSONArray columnKeys = new JSONArray(Arrays.asList(chartModel.商业数据2));dataToJSON.put("columnkeys", columnKeys);dataToJSON.put("hctitle", highcharts标题);dataToJSON.put("yTitle", highcharts纵坐标标题);for (int i = 0; i < rowKeys.length(); i++) {double[] datas = chartModel.getData()[i];JSONArray jsonArray = new JSONArray();for (int j = 0; j < datas.length; j++) {jsonArray.put(datas[j]);}dataToJSON.put("data" + i,jsonArray);}} catch (JSONException e) {e.printStackTrace();}return dataToJSON.toString();}?3.java公布jsonData的获取
public String getJsonData() {return jsonData;}?
4-5.js方法：1.处理数据 2.生成图表 3.赋给页面对象
function updateData(jsonData) {//console.log('begin update'); 这是firebug的调试语句var barModel = eval('(' + jsonData + ')');generateChart(barModel);//console.log(jsonData);jQuery("#datadiv").html(jsonData);}function generateChart(barModel) {var width = jQuery(window).width();var height = jQuery(window).height();jQuery("#highchartChart").width(width / 1.2).height(height / 1.5);//console.log('begin generate chart');//console.log(barModel);chart = new Highcharts.Chart({ chart : { renderTo : 'highchartChart', defaultSeriesType: 'column', borderWidth : 2, borderColor : '#4572A7' }, title: { text: barModel.hctitle }, plotOptions: { column: { pointPadding: 0.2, borderWidth: 0 } }, tooltip: { formatter: function() { return ''+this.y; } }, xAxis: { categories:barModel.columnkeys }, yAxis: { min: 0, max: 1, allowDecimals:true, title: { text: barModel.yTitle } }, series: [{ name: barModel.rowkeys[0], data: barModel.data0 }, { name: barModel.rowkeys[1], data: barModel.data1 }]});//console.log('generate chart successfully.');}?
文件组织：
这个实例使用了
一个xhtml作为页面部分，
一个js文件实现具体方法，
一个java类实现后台业务和json封装。
?
页面部分需要注意的是，声明js要在body中，否则chrome浏览器会报一个异常：
Uncaught TypeError: Cannot call method 'appendChild' of null