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