Java与Highcharts实例（三） - Hello Highcharts (后台Java传递数据)

上一回，我们使用官方的介绍，完成了Highcharts的入门

1. 引入Highcharts 依赖的JS

2. 新建DIV容器

3. 编写JS

在这里，我们用Java做后台实现数据的传递

1. 改造JS

我们为了使用从后台传过来的数据，需要对JS做些修改

[javascript] view plain copy

1. <script type="text/javascript">  
2.     $(function() {  
3.           
4.         var options = {  
5.                 chart : {  
6.                     type : 'column' , //指定图表的类型，默认是折线图（line）  
7.                     renderTo: 'container'  
8.                 },  
9.                 title : {  
10.                     text : 'My first Highcharts chart' //指定图表标题  
11.                 },  
12.                 xAxis : {  
13.                     categories : [ 'my', 'first', 'chart' ] //指定x轴分组  
14.                 },  
15.                 yAxis : {  
16.                     title : {  
17.                         text : 'something'   // 指定y轴的标题  
18.                     }  
19.                 },  
20.                 series : [ ]  //指定数据列,这里设为空，我们从后台拿数据  
21.         };  
22.           
23.         //从后台获取json格式的数据  
24.         $.getJSON("hello" , function(data) {  
25.             //插入Json数据  
26.             options.series = data;  
27.             //初始化chart  
28.             var chart = new Highcharts.Chart(options);  
29.         });  
30.   
31.     });  
32. </script>  

这里，我们使用了另一种方法初始化Highcharts：new Highcharts.Chart(op);

我们将Highcharts的配置单拿出来作为一个对象（应该是这样理解，有时间学习下JavaScript面向对象的思想比较有好处）

我们在上面定义了一个options对象，图表参数都在这里

我们用JQuery获取数据，然后初始化图表

2. 后台Servlet

[java] view plain copy

1. /* 
2.  * series : [ { //指定数据列   
3.               name : 'Jane', //数据列名   
4.               data : [ 1, 0, 4 ] //数据   
5.           }, {   
6.               name : 'John',   
7.               data : [ 5, 7, 3 ]   
8.           } ]  
9.  */  
10. //初始化数据  
11. SimpleData data_jane = new SimpleData("Jane" , new Integer[]{1 , 0 , 4});  
12. SimpleData data_john = new SimpleData("Jone" , new Integer[]{5 , 7 , 3});  
13.   
14. List<SimpleData> datas = new ArrayList<SimpleData>();  
15. datas.add(data_jane);  
16. datas.add(data_john);  
17.   
18. //使用Google的Json工具  
19. Gson gson = new Gson();  
20. //将JSON串返回  
21. PrintWriter out = resp.getWriter();  
22. out.print(gson.toJson(datas));  
23. out.flush();  
24. out.close();  

效果：

好，一个简单调用后台的Highcharts例子就完成了