图表组件highchart 支持jquery的报表 -优快云博客

highcharts是个支持jquery的报表组件，支持pie、column、line、area。支持很多效果选项，之前已经有些介绍了，不不在详细说明了，普通的应用参考http://xosadan.iteye.com/blog/1089452。

在图表报表实际应用中，有些特殊的应用，比如需要对饼图的每一个小瓣添加些点击处理的事件，比如添加不同的超链接或者添加弹出详情的层等效果。查了很久的官方API才发现如何触发饼图的点击事件，并且区分每次点击的具体是哪个区域，进行针对性的特殊处理。

调用highchart的jquery封装如下，最主要的就是红色字体标注的。

(function($){
	$.fn.extend({
		pieChart : function(option){
			var defaultOption = {
				url:"",
				moduleName:"",
				moduleUrl:""
			};
			
			$.extend(defaultOption, option);
			
			var chartOptions = {
				chart: {
			    	renderTo: $(this).attr('id'),
			        plotBackgroundColor: null,
			        plotBorderWidth: 2,
			        plotShadow: true
			    },
			    title: {
			        text: defaultOption.moduleName
			    },
			    tooltip: {
			        formatter: function() {
			        	if(this.y>0)
			    		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事件
					         if(this.options.href!=null&&this.options.href.length>5)
					        	 document.location.href=PATH+this.options.href;
					         },
					         legendItemClick  : function(event){//绑定legend区域的click事件
					        	 return false;
						      }
					        }
					    }
			         }
			      },
			      series: [{
			    	  type: 'pie',
			    	  name: 'name',
			    	  width: 400,
			    	  height: 600,
					  data: []
			      }]
			};
			
			
			$.get(defaultOption.url, function(data){
				 chartOptions.series[0].data=data;
				 new Highcharts.Chart(chartOptions);    
			});                        
		}
	});
})(jQuery)

如果要支持一些特殊的应用，比如要触发具体的点击效果，要求后台传出来的格式比如为json对象模式

json格式如下

[
[name"失学青少年( 5 )",y:13.89,href:"http://www.google.cm/123"],
[name:"流浪乞讨青少年( 2 )",y:5.56,href:"http://www.google.cm/123"],
[name:"服刑在教人员未成年子女( 0 )",y:0.0,href:"http://baidu.com"],
[name:"农村留守儿童( 24 )",y:66.67],
[name:"其他( 5 )",y:13.89]
]

hightcharts支持的data格式

An array of data points for the series. The points can be given in three ways:

A list of numerical values. In this case, the numberical values will be interpreted and y values, and x values will be automatically calculated, either starting at 0 and incrementing by 1, or from pointStart and pointInterval given in the plotOptions. If the axis is has categories, these will be used. Example:
```
data: [0, 5, 3, 5]
```
A list of arrays with two values. In this case, the first value is the x value and the second is the y value. If the first value is a string, it is applied as the name of the point, and the x value is incremented following the above rules. Example:
```
data: [[5, 2], [6, 3], [8, 2]]
```
A list of object with named values. In this case the objects are point configuration objects as seen under options.point. Example:
```
data: [{
	name: 'Point 1',
	color: '#00FF00',
	y: 0
}, {
	name: 'Point 2',
	color: '#FF00FF',
	y: 5
}]
```

后台只要抛回一个list<javabean>,javabean 里面是一个包括name，y,href的属性。

前台即可显示饼图，并且带有点击触发效果。