引用:highChart控件不错，挺漂亮
之前项目里面的报表组建用的是flash的amchart，非常漂亮，但是有几个缺陷，比如在数据量多的时候，某些提示信息会被flash给遮挡住，导致显示不全。另外部分浏览器没有安装flash的播放插件，导致客户端无法正常显示，另外amchart只支持xml格式的数据，参数等配置都在xml中进行配置的，和java的体系结构有些格格不入。所以后来索性替换成了jquery的一个报表插件highchart。 该插件支持各种主流的图表，比如饼图，柱图，线图。支持一些类似amchart的效果，比如动态缩进，动态加载，鼠标悬停提示，提示框等，支持json数据，支持jquery，支持ajax加载。 Highcharts 官网：http://www.highcharts.com Highcharts 官网示例：http://www.highcharts.com/demo/ Highcharts 官网文档：http://www.highcharts.com/documentation/how-to-use 具体使用不多说了很简单的，主要说些小细节。
(function($){
$.fn.extend({
columnChart : function(option){
var defaultOption = {
url:'',
moduleName:''
};
$.extend(defaultOption,option);
var chartOptions = {
chart: {
renderTo: $(this).attr('id'),
defaultSeriesType: 'column'
},
title: {
text: ''
},
xAxis: {
categories:[]
},
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: ''
}
},
legend: {
align: 'right',
x: -100,
verticalAlign: 'top',
y: 20,
floating: true,
backgroundColor: '#FFFFFF',
borderColor: '#CCCCCC',
borderWidth: 1,
shadow: true
},
tooltip: {
formatter: function() {
return '<b>'+ this.x +'</b><br/>'+
this.series.name +': '+ this.y +'<br/>'+
defaultOption.moduleName+'总数量: '+ this.point.stackTotal;
}
},
plotOptions: {
column: {
stacking: 'normal'
}
},
series: []
};
$.get(defaultOption.url, function(data) {
var moduleName='';
if(defaultOption.moduleName != ''){
moduleName = defaultOption.moduleName;
}else{
moduleName = data.moduleName;
}
chartOptions.title.text = moduleName+'柱状图';
chartOptions.yAxis.title.text = moduleName;
chartOptions.xAxis.categories = data.categories;
chartOptions.series = data.series;
new Highcharts.Chart(chartOptions);
});
}
})
$.fn.extend({
pieChart : function(option){
var defaultOption = {
url:"",
moduleName:""
};
$.extend(defaultOption, option);
var chartOptions = {
chart: {
renderTo: $(this).attr('id'),
plotBackgroundColor: null,
plotBorderWidth: 2,
plotShadow: true
},
title: {
text: defaultOption.moduleName+'饼状图'
},
tooltip: {
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ this.y +' %';
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
formatter: function() {
if(this.y>0)
return '<b>'+ this.point.name +'</b>: '+ this.y +' %';
}
},
showInLegend: true,
<SPAN style="BACKGROUND-COLOR: #888888"> point: {
events : {
click : function(){//绑定click事件
alert("11111111111");
}
}
}</SPAN>
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: []
}]
};
$.get(defaultOption.url, function(data){
chartOptions.series[0].data=data;
new Highcharts.Chart(chartOptions);
});
}
});
})(jQuery)
后台很简单，用一个javabean组装数据拼装成一个json对象抛出即可。黑色背景色代码表示为饼图添加一个点击的事件，允许做些例外的操作，比如显示详情，或者切换页面等。 另外highchart支持到处图片或者pdf文件，需要导入几个lib包，最主要的是batik，该包由于升级到1.7，分散成20多个小的lib包，后来用了1.6的，加载几个其他必须的，一共3个lib包。 中文乱码问题，通过filter设置编码即可解决。http://highcharts.codeplex.com/ ---highcharts.net官方网站