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