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)后,有时候从server返回client的数据是对象,自己手动拼凑 json字符串easy出错,通过度娘知道了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
 
                    
                     
                    
                 
                    
                 
                
            
         
         浙公网安备 33010602011771号
浙公网安备 33010602011771号