圖表元件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:

1. 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]      

2. 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]]      

3. 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的屬性。

前台即可顯示餅圖，并且帶有點選觸發效果。