Highcharts 是一个用纯JavaScript编写的图标类库，提供了比较简单的方式来为网页插入漂亮的、交互式的图标。目前支持各种折线图、区域图、柱状图、散列图，以及几种图的混合使用，此外还支持仪表、地热、雷达、极区、金字塔、瀑布等专业的图表。和收费的FusionCharts和AnyCharts比起来，HighCharts免费（Free-Non-Commercial许可证），并且扁平化的设计感很有优势，并且官方提供了大量的示例供研究。
在jsp页面使用Highcharts
参照教程首先引入jquery库和highcharts.js文件，接着就可以在页面中使用了。如果只是新建静态图表，那么按照教程直接来就可以生成漂亮的图标了。但是如果要在jsp中使用，就需要用到json（或类似的数据序列化格式）和ajax的方法来搞定了。这里使用了struts2和tomcat7来设计，并且环境已经配置好。
1、新建Action
在src目录新建一个JsonAction.java的类，并定义数据，这里要显示每个季度的数值，使用了一个map来存储。
public class JsonAction extends ActionSupport implements ServletRequestAware {
private Map seasonMap = new LinkedHashMap();
//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 getSeasonMap() {
return seasonMap;
}
public void setSeasonMap(Map seasonMap) {
this.seasonMap = seasonMap;
}
public String getCountryName() {
return countryName;
}
public void setCountryName(String countryName) {
this.countryName = countryName;
}
}
2、在struts.xml中指定action指向和跳转方式
{"countryName":"China","seasonMap":{"s1":"12","s2":"55","s3":"26","s4":"88"}}
的json格式结果。
3、jsp页面中的调用
新建一个jsp页面，内容如下
$(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();
}
});
});
页面中使用ajax方式载入了ajaxAction返回的json数据，接着分别存储keys和values，并据此来绘制图形，关于图形的绘制方式和各个属性，可以通过API查看。
去掉右下角highchart.com链接
在highcharts({…})方法里，增加
credits: {
enabled: false
},
的选项即可去掉连接，或者根据描述，操作href、style、text等属性，自定义自己的链接和现实样式。
总结
既然使用Javascript，使用其他语言肯定也很简单的，对于希望在网站中展示基于html5互动图表的用户，Highcharts是个很不错的工具。
, All Rights Reserved.