jquery报表组件highchat的使用

之前项目里面的报表组建用的是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

 

具体使用不多说了很简单的，主要说些小细节。

 

封装的js调用方法。

(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,
					    point: {
					        events : {
					         click : function(){//绑定click事件
					          alert("11111111111");
					         }
					        }
					    }
			         }
			      },
			      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设置编码即可解决。