- 浏览: 497160 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (250)
- concurrent (11)
- io (1)
- CI (10)
- linux (57)
- windows (2)
- java (38)
- mac (4)
- eclipse (9)
- db (13)
- python (5)
- groovy (5)
- flex (7)
- hibernate (5)
- odb (8)
- netbeans (1)
- web (31)
- book (14)
- erlang (2)
- communication (2)
- virtualization (5)
- jUnit (0)
- jsf (1)
- perl (1)
- java jax-rs (5)
- Jenkins (2)
- Jenkins Plugin (3)
- android (2)
- git (1)
- big data (0)
- 试读 (1)
最新评论
-
yzzy4793:
讲的很清楚,明白
同步synchronized方法和代码块 -
aa51513:
中文乱码式硬伤
Jersey2.x对REST请求处理流程的分析 -
feiwomoshu1991:
...
同步synchronized方法和代码块 -
marshan:
启动失败的原因是加载的类版本冲突,因此你首先要保证依赖的版本和 ...
richfaces中facelet版本升级到2时的典型错误和解决办法 -
zhaohang6688:
请问我按照你的方式修改还是报错 错误信息还是这个 是为什么啊 ...
richfaces中facelet版本升级到2时的典型错误和解决办法
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
- 2011-01-12.7z (1.2 KB)
- 下载次数: 57
发表评论
-
拥抱Java8第一弹
2014-01-17 11:59 2719package creative.air.java8.com ... -
Log4j2 整理
2013-12-09 12:25 812http://logging.apache.org/log4j ... -
profilers
2013-12-01 20:15 739SonarQube http://www.sonarqu ... -
JProfiler download
2013-12-01 20:01 1103Version: 8.0.1 (2013-07-31) h ... -
yjp download
2013-12-01 19:12 1089Download YourKit Java Profile ... -
Ubuntu中Java IDE启动器配置
2013-09-23 11:06 1422sudo nano /usr/share/applicati ... -
JAVA SYS TIME
2013-07-29 07:50 1059public class TestSys { //@Tes ... -
计划任务的顺序执行[Quartz Scheduler v.2.1.6]
2013-04-07 13:39 7790使用Quartz做计划任务时,默认情况下,当前任务总会执行 ... -
test list
2013-01-21 16:05 1029import java.util.ArrayList; p ... -
使用HashMap实现缓存
2012-09-07 01:28 4179本类开发中 欢迎拍砖 重伤我者 必须答谢! 实现: ... -
architect mark
2012-07-25 23:46 9651Z0_864 1Z0_865 1Z0 ... -
Windows下多版本Java并存问题
2012-05-01 23:59 9724跨平台的Java配置如下: C:\Users\Admi ... -
使用gitHub下载richfaces代码
2011-12-28 17:40 1542richfaces的源代码位于 https://github. ... -
jvm command
2011-10-18 22:05 1039/System/Library/Java/Java ... -
[童虎退壳系列]判等与哈希值的覆写
2011-10-13 01:57 1113public final class EqualsHas ... -
Java枚举
2011-06-22 10:00 867public enum TransportTy ... -
使用richfaces玩转json
2011-01-10 18:16 4440richfaces封装了jQuery和json,因此我们在ri ... -
JSF项目打包
2010-09-05 22:30 1176同事问我,JSF项目发布的时候,为什么编译后的类放在class ... -
SLF4J version conflict
2010-08-31 11:21 1644Here are the exception detail ... -
3大结构模式辨析
2010-05-03 15:57 1121首先看看维基百科中对7个结构模式的定义 from Wiki ...
相关推荐
在这个场景中,我们将探讨如何使用Java和Highcharts这两个工具来实现一个动态的、交互式的折线图。Highcharts是一个流行的JavaScript库,专门用于创建高质量的图表,而Java则作为后端语言,负责处理数据并将其传递给...
在Linux环境下使用Highcharts生成图表时,可能会遇到一个常见的问题:保存图片时出现乱码。这个问题通常是由于字体配置不正确或者缺失特定字体导致的。Highcharts在渲染图表时需要依赖本地的字体库来呈现文本,当它...
本文将详细探讨如何使用Highcharts实现雷达图效果。 首先,我们需要了解Highcharts的基本使用。在HTML文件中,你需要引入Highcharts的库文件,通常包括`highcharts.js`和对应的样式文件`highcharts.css`。你可以...
在IT领域,尤其是在数据可视化和用户交互设计中,HighCharts是一个广泛应用的JavaScript...记得在开发过程中,充分理解和利用HighCharts的API,以及Qt的QWebEngineView特性,可以有效地实现各种复杂的图形和交互效果。
7. **综合显示图**:Highcharts还支持在一个图表中组合多种类型的图表,如混合柱状图和线图,以在同一视图下展示不同数据类型。 8. **交互功能**:Highcharts图表具有丰富的交互特性,如点击事件、拖拽重排、工具...
在“Highcharts实现图形报表”这个主题中,我们将深入探讨如何利用Highcharts来构建动态且富有吸引力的数据展示。 首先,要使用Highcharts,你需要引入三个核心的JavaScript文件: 1. **highcharts.js**:这是...
在这个“highcharts-地图下钻-实际案例.rar”压缩包中,包含了一个具体的应用示例,展示了如何利用Highcharts实现地图的下钻功能,特别是针对福建省的统计省市地区数据进行可视化。 地图下钻是数据可视化中的一个...
为了实现实时流量趋势图,我们需要使用 Highcharts 库的 spline 图表类型,该类型能够动态更新数据,实现实时变化效果。下面是实现实时流量趋势图的主要 JS 代码段: 首先,我们需要引入 Highcharts 库和 jQuery 库...
本教程将详细介绍如何在ASP.NET MVC框架下实现一个Highcharts导出服务器。 首先,我们需要了解Highcharts的导出功能。Highcharts内置的导出功能允许用户将图表以图像(JPEG、PNG、PDF或SVG)的形式保存或打印,但是...
解决highcharts多级下钻问题,下钻过程中使用了多种图例,自带上钻功能 c#,java使用方法一样,demo中使用c#方法实现 vs打开直接可以运行无需连接数据库 大数据下钻可使用异步加载提升性能
Highcharts AJAX JSON JQuery 实现动态数据交互显示图表 柱形图 后台代码大家根据自己的情况写并转JSON格式。在前台修改url,即可出柱形图
7. **模块化**:Highcharts提供了一些可选的扩展模块,如Drilldown(层级下钻)、Map(地图)等。 四、使用步骤 1. **引入库文件**:在HTML文件中引入jQuery和Highcharts的相关脚本文件。 2. **准备数据**:根据...
在本文中,我们将深入探讨如何使用Highcharts.js来实现这些图表,并探讨其核心概念和功能。 1. **基本使用** 首先,你需要在HTML文件中引入Highcharts.js库。你可以通过CDN链接或者下载后的本地文件路径来实现这...
默认情况下,Highcharts会尝试在饼图的周围空间内放置标签,但如果标签过长,没有足够的空间容纳,就会出现重叠或超出的问题。为了解决这个问题,Highcharts提供了多种策略和配置选项: 1. **自动旋转**:...
5. **交互性**:Highcharts的图表支持鼠标悬停、点击等交互事件,可以触发自定义函数,实现图表的进一步操作,如弹出详细信息框、高亮数据点等。 6. **图表类型**:Highcharts支持多种图表类型,包括但不限于: - ...
在本例中,通过查看`highcharts-9.3.3`中的源码,开发者可以学习到Highcharts的内部实现,了解如何构建复杂的图表结构,以及如何利用事件处理和数据动态加载等功能。 对于毕业设计论文和计算机案例,Highcharts是一...
在实际应用中,Highcharts不仅可以用于数据可视化,还可以实现交互效果,如数据点的悬浮提示、图表缩放、拖动等,增强了用户与数据之间的互动性。 解压"Highcharts-9.3.2"文件后,通常会包含JavaScript文件、CSS...
2. **数据组合**:Highcharts允许你在同一图表中混合不同类型的数据系列,例如在同一图表中同时显示折线图和柱状图,这在比较不同维度的数据时非常有用。 3. **动态更新**:Highcharts支持实时更新数据,这对于展示...