用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 |
public class JsonAction extends ActionSupport implements ServletRequestAware { private Map<String, String> seasonMap = new LinkedHashMap<String, String>(); //Parameter from Jquery private String countryName; public String execute() { seasonMap.put("s1", "12"); seasonMap.put("s2", "55"); seasonMap.put("s3", "26"); seasonMap.put("s4", "88"); setCountryName("China"); return SUCCESS; } @Override public void setServletRequest(HttpServletRequest request) { } public Map<String, String> getSeasonMap() { return seasonMap; } public void setSeasonMap(Map<String, String> seasonMap) { this.seasonMap = seasonMap; } public String getCountryName() { return countryName; } public void setCountryName(String countryName) { this.countryName = countryName; } } |
2、在struts.xml中指定action指向和跳转方式
|
1 2 3 4 5 |
<package name="test" namespace="/" extends="json-default"> <action name="ajaxAction" class="com.action.JsonAction" method="execute"> <result type="json"/> </action> </package> |
接着，测试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 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"> <head profile="http://gmpg.org/xfn/11"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script src="js/jquery.js"></script> <script src="js/highcharts.js"></script> <script type="text/javascript"> $(document).ready( function() { $.ajax({ type : "POST", url : "ajaxAction", dataType : "text", success : function(data) { data = $.parseJSON(data); var country = data.countryName; // keys var keys = []; // values var vals = []; $.each(data.seasonMap, function(key, value){ keys.push(key); // 注意把json数据转换为int格式（或float等数据型，不能为String型） vals.push(parseInt(value)); // 控制台输出 console.log(key, value); }); var drawChart = 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(); } }); }); </script> </head> <body> <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> </body> </html> |
页面中使用ajax方式载入了ajaxAction返回的json数据，接着分别存储keys和values，并据此来绘制图形，关于图形的绘制方式和各个属性，可以通过API查看。
去掉右下角highchart.com链接
在highcharts({…})方法里，增加
|
1 2 3 |
credits: { enabled: false }, |
的选项即可去掉连接，或者根据描述，操作href、style、text等属性，自定义自己的链接和现实样式。
总结
既然使用Javascript，使用其他语言肯定也很简单的，对于希望在网站中展示基于html5互动图表的用户，Highcharts是个很不错的工具。
占个沙发先，然后看不懂。囧
上次我也用了，不过不是我在弄，我那个小组用js版本弄各种图表，还有一个是地图互动
@zwwooooo 地图那个我也试了试，好牛逼的
jsp的现在还没有深入学习~