【www.bbyears.com--js教程】
Highcharts 提供了比较简单的方式来为网页插入漂亮的、交互式的图标。目前支持各种折线图、区域图、柱状图、散列图，以及几种图的混合使用，此外还支持仪表、地热、雷达、极区、金字塔、瀑布等专业的图表。和收费的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
//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
return seasonMap;
}
public void setSeasonMap(Map
this.seasonMap = seasonMap;
}
public String getCountryName() {
return countryName;
}
public void setCountryName(String countryName) {
this.countryName = countryName;
}
}
public class JsonAction extends ActionSupport implements ServletRequestAware {
private Map
//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
return seasonMap;
}
public void setSeasonMap(Map
this.seasonMap = seasonMap;
}
public String getCountryName() {
return countryName;
}
public void setCountryName(String countryName) {
this.countryName = countryName;
}
}
2、在struts.xml中指定action指向和跳转方式
接着，测试http://localhost:8080/ajaxAction，应该会返回如下
{"countryName":"China","seasonMap":{"s1":"12","s2":"55","s3":"26","s4":"88"}}
{"countryName":"China","seasonMap":{"s1":"12","s2":"55","s3":"26","s4":"88"}}
的json格式结果。
3、jsp页面中的调用
新建一个jsp页面，内容如下
<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>
style="min-width: 310px; height: 400px; margin: 0 auto">
<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>
style="min-width: 310px; height: 400px; margin: 0 auto">
页面中使用ajax方式载入了ajaxAction返回的json数据，接着分别存储keys和values，并据此来绘制图形，关于图形的绘制方式和各个属性，可以通过API查看。
去掉右下角highchart.com链接
在highcharts({…})方法里，增加
credits: {
enabled: false
},
credits: {
enabled: false
},
的选项即可去掉连接，或者根据描述，操作href、style、text等属性，自定义自己的链接和现实样式。
总结
既然使用Javascript，使用其他语言肯定也很简单的，对于希望在网站中展示基于html5互动图表的用户，Highcharts是个很不错的工具。
Highcharts AJAX JSON JQuery 实现动态数据交互显示图表 柱形图
先看效果图。
Highcharts 中文API 实例网站
http://www.hcharts.cn/index.php ---------------------中文官方网站
http://www.hcharts.cn/docs/index.php----------------中文教程
http://www.hcharts.cn/demo/index.php---------------在线演示
http://bbs.hcharts.cn/forum.php-----------------------中文论坛
下载highcharts 与使用
http://www.hcharts.cn/resource/index.php 使用最新的就可以了。
http://www.hcharts.cn/docs/index.php?doc=start-download 网站里面有详细的介绍每个文件夹的作用。
需要的文件 jquery 自己下载就好了
<script type="text/javascript" src="${ctx }/js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="${ctx }/js/highcharts/highcharts.js"></script>
页面index.jsp增加的代码
html代码
查看图表
js代码
function gotoHighchart(){
var url = '${ctx }/user/chartpage';
window.location.href=url;
}
操作当点击跳转页面
Controller代码
@RequestMapping(value = "chartpage")
public String chartpage(HttpServletRequest request,
HttpServletResponse response) {
return "views/user/chartpage";
}
与第5步的想对应。
所需要的页面代码 chartpage.jsp
以上实现了页面跳转的功能。需要图表的数据。还得继续
图表需要的数据方法
Controller
接受service传递json的字符串给页面
@RequestMapping(value = "/chart")
public String chart(HttpServletRequest request,
HttpServletResponse response) throws Exception {
String result = null;
try {
result = userService.chart();
} catch (Exception e) {
if(log.isErrorEnabled()){
log.error("查询列表失败", e);
}
result = null;
}
StringUtil.writeToWeb(result, "html", response);
return null;
}
Service
将list对象存入map中。并转为json字符串数组
/**
* highcharts用的
* @Title: chart
* @Description: 直接转出JSON传递给前台页面接受
* @return
*/
public String chart(){
List
Map
map.put("list", list);
Gson gson = new GsonBuilder().setDateFormat("yyyy-MM-dd").create();
String s = gson.toJson(map);
return s;
}
DAO
使用的的JDBCTemplate 传递sql语句查询。返回list对象
public List
String sql = "select u.name,u.age from userinfo u";
return jdbcTemplate.queryForList(sql);
}
以上基本完成了数据的获取和转JSON字符串数组剩下就是在页面接受JSON并填充到highcharts图表里面
JS代码。使用AJAX传递过来。并填充到highcharts里面即可。最后一步，也是最要人命的一步。
一定要注意json字符串数组的解析。本人就是在这里纠结了半天多。怨自己没好好学习jquery。和强大的JSON字符串。
本人的json为 所以在遍历的时候需要注意一下自己的list这个数组里面的数据。可以忽略这句话。是本人的失误。
{"list":[{"name":"一号","age":19},{"name":"二号","age":22},{"name":"test","age":19}....]}
$(function(){
var x = [];//X轴
var y = [];//Y轴
var xtext = [];//X轴TEXT
var color = ["gray","pink","red","blue","yellow","green","#fff"];
$.ajax({
type:'get',
url:'${ctx}/user/chart',//请求数据的地址
success:function(data){
var json = eval("("+data+")");
var s = 1;
for(var key in json.list){
json.list[key].y = json.list[key].age; //给Y轴赋值
xtext = json.list[key].name;//给X轴TEXT赋值
json.list[key].color= color[key];
}
chart.series[0].setData(json.list);//数据填充到highcharts上面
},
error:function(e){
}
});
var chart = new Highcharts.Chart({
chart:{
renderTo:'container',
type:'column' //显示类型 柱形
},
title:{
text:'年龄分布图' //图表的标题
},
xAxis:{
categories:xtext
},
yAxis:{
title:{
text:'年龄' //Y轴的名称
},
},
series:[{
name:"姓名"
}]
});
});