DWR(AJAX)+Highcharts绘制曲线图,饼图

基本需求:
1. 在前台会用DWR框架(或者AJAX)调用Java后台代码获取要在Hightcharts展示的数据
2. 了解JSON(JavaScript Object Notation)的格式
3. Hightcharts的x,y轴数据绑定
4. Hightcharts的使用自定义样式
Highcharts代码(或者说Highcharts的配置)是一个json字符串,说白了就是要想在前台使用Hightcharts插件绘图,后台返回的数据类型必须是json字符串,Hightcharts才会认识。
以下以DWR框架为例,绘制一个曲线图(x,y轴),和饼图(没有x轴),演示后台数据如何绑定到Highcharts的x,y轴。不解释,先贴图看效果:
这里写图片描述
这里写图片描述

Example 1:曲线图

1) JAVA后台代码:
这里写图片描述

2) 前台DWR调用:
这里写图片描述
注意看看alert的是一个什么鬼吧…
这里写图片描述
3) 配置一个Hightcharts曲线图(定义一个Hightchars),var gline = { }; 尼玛:看起来哪哪都是JSON
Hightcharts依赖与Jquery所以必须引入jquery-1.8.3.min.js,另外就是Hightcharts核心highcharts.js

<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/4.0.1/highcharts.js"></script>

这里写图片描述
4) 上面已经定义了一个Highcharts曲线图,现在就差将数据绑定到x,y轴显示
(继续补充完成2)中的代码)
这里写图片描述
注意:eval函数的使用!!!!

Example 2 :饼图

1) JAVA后台代码:
这里写图片描述
2)前台DWR调用:
这里写图片描述

注意看看alert的是一个什么鬼吧…

3)配置一个Hightcharts的饼图: ,var dpie = { };
这里写图片描述

4)绑定数据
dpie.series[0].data = eval(data);
new Highcharts.Chart(dpie);

二、 Hightcharts的使用自定义样式
这里写图片描述

给所有的Highcharts应用样式:
Highcharts.setOptions(myTheam);//给图表设置主题样式
如果想给每一个图应用不同的样式,则将Highcharts.setOptions(myTheam);写在每一个DWR调用后台数据方法内,如下:定义了两个主题myTheam和myTheam1
这里写图片描述
这里写图片描述

DWR(AJAX)+Highcharts绘制各种图(柱状,饼图,曲线…)小结V2.0
改进步骤1):学会了在j2ee中使用DWR(AJAX)后,有时候从服务器返回客户端的数据是对象,自己手动拼凑 json字符串容易出错,通过度娘知道了json-lib这个类库,方便的支持java中对象到json字符串的转化。
依赖的类库:json-lib-2.4-jdk15.jar
ezmorph-1.0.6.jar
commons-logging.jar
commons-lang.jar
commons-collections.jar基本需求:
1. 在前台会用DWR框架(或者AJAX)调用Java后台代码获取要在Hightcharts展示的数据
2. 了解JSON(JavaScript Object Notation)的格式
3. Hightcharts的x,y轴数据绑定
4. Hightcharts的使用自定义样式
Highcharts代码(或者说Highcharts的配置)是一个json字符串,说白了就是要想在前台使用Hightcharts插件绘图,后台返回的数据类型必须是json字符串,Hightcharts才会认识。
以下以DWR框架为例,绘制一个曲线图(x,y轴),和饼图(没有x轴),演示后台数据如何绑定到Highcharts的x,y轴。不解释,先贴图看效果:

Example 1:曲线图

1) JAVA后台代码:
这里写图片描述

2) 前台DWR调用:
这里写图片描述

3)JsonConveterUtil:Json转换器工具类

工具类以及源码下载:http://pan.baidu.com/s/1mgxHExa

评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值