AJAX与highcharts的调用
本项目以SSH为基本框架，要根据数据库的数据动态生成图表，需要ajax的运用。首先需要掌握的是在SSH框架中的ajax的运用。AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。
以周支出堆叠图为例
首先对于需要生成图表的数据在后台进行分析处理，然后经过转义，生成能让前台HighChart调用的JSON数据
data = "[{name:\'周一\',data:" + Mon + "},{name:\'周二\',data:" + Tue+ "},{name:\'周三\',data:" + Wed + "},{name:\'周四\',data:"+ Thur + "},{name:\'周五\',data:" + Fri+ "},{name:\'周六\',data:" + Sat + "},{name:\'周日\',data:"+ Sun + "}]";
然后在前台script调用转义好的JSON
$(function() {
var daily = "daily";
$.getJSON(daily,function(data) {
var obj = eval_r("(" + data + ")");
var container = $('#container').highcharts(
{
chart : {type : 'column'},
title : {text : '周支出堆叠图'},
xAxis : {categories : [ '食品酒水','衣服饰品', '行车交通','休闲娱乐', '学习进修','医疗保健', '其他杂项' ]},
yAxis : {min : 0,
title : {text : '金额(￥)'},
stackLabels : {enabled : true,
style : {fontWeight : 'bold',color : (Highcharts.theme && Highcharts.theme.textColor)|| 'gray'}
}
},
legend : {align : 'right',
x : -70,
verticalAlign : 'top',
y : 20,
floating : true,
backgroundColor: (Highcharts.theme && Highcharts.theme.background2)
|| 'white',
borderColor : '#CCC',
borderWidth : 1,
shadow : false},
tooltip : {formatter : function() {
return ''+ this.x+ '
' + this.series.name+ ': '
+ this.y+ '
'+ 'Total: '+ this.point.stackTotal;}},
plotOptions : {
column : {
stacking : 'normal',
dataLabels : { enabled : true,
color : (Highcharts.theme && Highcharts.theme.dataLabelsColor)
|| 'white',style : { textShadow : '0 0 3px black, 0 0 3px black'
}
}
}
},
series : obj
});
});
});