效果图:
具体代码:
包括背景透明,图表中载入图片等;
function showPie(name){
var a = [
{name:'A',y:100,href:'http://www.baidu.com',color:'#D587CE'},
{name:'B',y:30,href:'http://www.baidu.com',color:'#34E3FF'},
{name:'C',y:10,href:'http://www.baidu.com',color:'#8EF58B'},
{name:'D',y:10,href:'http://www.baidu.com',color:'#F1FE19'},
{name:'E',y:5,href:'http://www.baidu.com',color:'#F8E104'},
{name:'F',y:5,href:'http://www.baidu.com',color:'#F68101'}
]
var chartOption = {
chart: {
renderTo: name,
backgroundColor: 'rgba(255, 255, 255, 0)',
plotBorderColor : null,
plotBackgroundColor: null,
plotBackgroundImage:null,
plotBorderWidth: null,
plotShadow: false,
borderWidth : 0,
events: {
load: function() {
this.renderer.image('cg.png', 41, 38, 40, 43) //位置参数 left top right bottom
.attr({
zIndex: 7
})
.add();
}
}
},
credits :{
enabled:false
},
title: {
text: ''
},
tooltip: {
formatter: function() {
//alert(1);
//return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
return '<b>'+ this.point.name +'</b>: '+ this.y;
},
style: {
color: '#333333',
fontSize: '10pt',
padding: 5,
zIndex:9999
}
},
plotOptions: {
pie: {
allowPointSelect: true,
borderWidth : 0,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: false,
point: {
events : {
click: function(event){
alert(this.y);
window.open(this.href);
}
}
},
dataLabels: {
enabled: false,
color: '#000000',
//distance: -20,
connectorColor: '#000000',
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
}
},
showInLegend: false,
size:68
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: a
}]
}
new Highcharts.Chart(chartOption);
}