1. 程式人生 > >DWR(AJAX)+Highcharts繪制曲線圖,餅圖

DWR(AJAX)+Highcharts繪制曲線圖,餅圖

logging 數據類型 hid 一個 ext js xml 通過 for 源代碼下載

基本需求:
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

DWR(AJAX)+Highcharts繪制曲線圖,餅圖