图表组件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: