highcharts mysql jsp_用Highcharts在jsp页面中绘制图表

Highcharts 是一个用纯JavaScript编写的图标类库，提供了比较简单的方式来为网页插入漂亮的、交互式的图标。目前支持各种折线图、区域图、柱状图、散列图，以及几种图的混合使用，此外还支持仪表、地热、雷达、极区、金字塔、瀑布等专业的图表。和收费的FusionCharts和AnyCharts比起来，HighCharts免费(Free-Non-Commercial许可证)，并且扁平化的设计感很有优势，并且官方提供了大量的示例供研究。

在jsp页面使用Highcharts

参照教程首先引入jquery库和highcharts.js文件，接着就可以在页面中使用了。如果只是新建静态图表，那么按照教程直接来就可以生成漂亮的图标了。但是如果要在jsp中使用，就需要用到json(或类似的数据序列化格式)和ajax的方法来搞定了。这里使用了struts2和tomcat7来设计，并且环境已经配置好。

1、新建Action

在src目录新建一个JsonAction.java的类，并定义数据，这里要显示每个季度的数值，使用了一个map来存储。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

publicclassJsonActionextendsActionSupportimplementsServletRequestAware{

privateMapseasonMap=newLinkedHashMap();

//Parameter from Jquery

privateStringcountryName;

publicStringexecute(){

seasonMap.put("s1","12");

seasonMap.put("s2","55");

seasonMap.put("s3","26");

seasonMap.put("s4","88");

setCountryName("China");

returnSUCCESS;

}

@Override

publicvoidsetServletRequest(HttpServletRequestrequest){

}

publicMapgetSeasonMap(){

returnseasonMap;

}

publicvoidsetSeasonMap(MapseasonMap){

this.seasonMap=seasonMap;

}

publicStringgetCountryName(){

returncountryName;

}

publicvoidsetCountryName(StringcountryName){

this.countryName=countryName;

}

}

2、在struts.xml中指定action指向和跳转方式

1

2

3

4

5

接着，测试http://localhost:8080/ajaxAction，应该会返回如下

1

{"countryName":"China","seasonMap":{"s1":"12","s2":"55","s3":"26","s4":"88"}}

的json格式结果。

3、jsp页面中的调用

新建一个jsp页面，内容如下

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

$(document).ready(

function(){

$.ajax({

type:"POST",

url:"ajaxAction",

dataType:"text",

success:function(data){

data=$.parseJSON(data);

varcountry=data.countryName;

// keys

varkeys=[];

// values

varvals=[];

$.each(data.seasonMap,function(key,value){

keys.push(key);

// 注意把json数据转换为int格式(或float等数据型，不能为String型)

vals.push(parseInt(value));

// 控制台输出

console.log(key,value);

});

vardrawChart=function(){

$('#container').highcharts(

{

title:{

text:'Monthly Average Values',

x:-20//center

},

subtitle:{

text:'Source: '+country,

x:-20

},

xAxis:{

categories:keys

},

yAxis:{

title:{

text:'Values'

},

plotLines:[{

value:0,

width:1,

color:'#808080'

}]

},

tooltip:{

valueSuffix:''

},

legend:{

layout:'vertical',

align:'right',

verticalAlign:'middle',

borderWidth:0

},

series:[{

name:'Series 1',

data:vals

}]

});

};

drawChart();

}

});

});

style="min-width: 310px; height: 400px; margin: 0 auto">