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
andpointStart
given in the plotOptions. If the axis is has categories, these will be used. Example:pointInterval
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的属性。
前台即可显示饼图,并且带有点击触发效果。