`

highcharts在richfaces下的实现

    博客分类:
  • java
阅读更多

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

1
1
分享到:
评论

相关推荐

    Java和Highcharts实现折线图

    在这个场景中,我们将探讨如何使用Java和Highcharts这两个工具来实现一个动态的、交互式的折线图。Highcharts是一个流行的JavaScript库,专门用于创建高质量的图表,而Java则作为后端语言,负责处理数据并将其传递给...

    highcharts在linux下保存图片乱码的解决办法

    在Linux环境下使用Highcharts生成图表时,可能会遇到一个常见的问题:保存图片时出现乱码。这个问题通常是由于字体配置不正确或者缺失特定字体导致的。Highcharts在渲染图表时需要依赖本地的字体库来呈现文本,当它...

    highcharts实现雷达图效果

    本文将详细探讨如何使用Highcharts实现雷达图效果。 首先,我们需要了解Highcharts的基本使用。在HTML文件中,你需要引入Highcharts的库文件,通常包括`highcharts.js`和对应的样式文件`highcharts.css`。你可以...

    用QWebEngineView呈现HighCharts图形,并实现曲线的拖拽

    在IT领域,尤其是在数据可视化和用户交互设计中,HighCharts是一个广泛应用的JavaScript...记得在开发过程中,充分理解和利用HighCharts的API,以及Qt的QWebEngineView特性,可以有效地实现各种复杂的图形和交互效果。

    Highcharts动态实现报表

    7. **综合显示图**:Highcharts还支持在一个图表中组合多种类型的图表,如混合柱状图和线图,以在同一视图下展示不同数据类型。 8. **交互功能**:Highcharts图表具有丰富的交互特性,如点击事件、拖拽重排、工具...

    Highcharts实现图形报表

    在“Highcharts实现图形报表”这个主题中,我们将深入探讨如何利用Highcharts来构建动态且富有吸引力的数据展示。 首先,要使用Highcharts,你需要引入三个核心的JavaScript文件: 1. **highcharts.js**:这是...

    highcharts-地图下钻-实际案例.rar

    在这个“highcharts-地图下钻-实际案例.rar”压缩包中,包含了一个具体的应用示例,展示了如何利用Highcharts实现地图的下钻功能,特别是针对福建省的统计省市地区数据进行可视化。 地图下钻是数据可视化中的一个...

    Highcharts实时流量趋势图

    为了实现实时流量趋势图,我们需要使用 Highcharts 库的 spline 图表类型,该类型能够动态更新数据,实现实时变化效果。下面是实现实时流量趋势图的主要 JS 代码段: 首先,我们需要引入 Highcharts 库和 jQuery 库...

    highcharts导出服务器的asp mvc实现

    本教程将详细介绍如何在ASP.NET MVC框架下实现一个Highcharts导出服务器。 首先,我们需要了解Highcharts的导出功能。Highcharts内置的导出功能允许用户将图表以图像(JPEG、PNG、PDF或SVG)的形式保存或打印,但是...

    highcharts 多级 下钻 多个series 三级 异步 大数据下钻 多个图例

    解决highcharts多级下钻问题,下钻过程中使用了多种图例,自带上钻功能 c#,java使用方法一样,demo中使用c#方法实现 vs打开直接可以运行无需连接数据库 大数据下钻可使用异步加载提升性能

    Highcharts AJAX JSON JQuery 实现动态数据交互显示图表 柱形图

    Highcharts AJAX JSON JQuery 实现动态数据交互显示图表 柱形图 后台代码大家根据自己的情况写并转JSON格式。在前台修改url,即可出柱形图

    jquery Highcharts jquery Highcharts

    7. **模块化**:Highcharts提供了一些可选的扩展模块,如Drilldown(层级下钻)、Map(地图)等。 四、使用步骤 1. **引入库文件**:在HTML文件中引入jQuery和Highcharts的相关脚本文件。 2. **准备数据**:根据...

    highcharts.js实现曲线图、柱状图、面积图等

    在本文中,我们将深入探讨如何使用Highcharts.js来实现这些图表,并探讨其核心概念和功能。 1. **基本使用** 首先,你需要在HTML文件中引入Highcharts.js库。你可以通过CDN链接或者下载后的本地文件路径来实现这...

    highcharts饼图字段超出解决

    默认情况下,Highcharts会尝试在饼图的周围空间内放置标签,但如果标签过长,没有足够的空间容纳,就会出现重叠或超出的问题。为了解决这个问题,Highcharts提供了多种策略和配置选项: 1. **自动旋转**:...

    highcharts

    5. **交互性**:Highcharts的图表支持鼠标悬停、点击等交互事件,可以触发自定义函数,实现图表的进一步操作,如弹出详细信息框、高亮数据点等。 6. **图表类型**:Highcharts支持多种图表类型,包括但不限于: - ...

    Highcharts图表库 v9.3.3.zip

    在本例中,通过查看`highcharts-9.3.3`中的源码,开发者可以学习到Highcharts的内部实现,了解如何构建复杂的图表结构,以及如何利用事件处理和数据动态加载等功能。 对于毕业设计论文和计算机案例,Highcharts是一...

    Highcharts-9.3.2.zip

    在实际应用中,Highcharts不仅可以用于数据可视化,还可以实现交互效果,如数据点的悬浮提示、图表缩放、拖动等,增强了用户与数据之间的互动性。 解压"Highcharts-9.3.2"文件后,通常会包含JavaScript文件、CSS...

    highcharts示例代码(官方例子)

    2. **数据组合**:Highcharts允许你在同一图表中混合不同类型的数据系列,例如在同一图表中同时显示折线图和柱状图,这在比较不同维度的数据时非常有用。 3. **动态更新**:Highcharts支持实时更新数据,这对于展示...

Global site tag (gtag.js) - Google Analytics