默认的highcharts 背景都是白色,这次项目中需要在highcharts图的后面显示背景图片,所以必须让chart背景透明:
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)
.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);
}
关键语句为:
backgroundColor: ‘rgba(255, 255, 255, 0)‘,
plotBorderColor : null,
plotBackgroundColor: null,
plotBackgroundImage:null,
plotBorderWidth: null,
plotShadow: false,
其中
events: {
load: function() {
this.renderer.image(‘cg.png‘, 41, 38, 40, 43)
.attr({
zIndex: 7
})
.add();
}
}
为初始化时在饼图中心加载1个图像,4个参数分别为,左右 上下 宽 和 高度,具体可以自行试验。
结果图为:
横杠处为背景图片,可以想象若chart背景不为透明,则会遮盖住背景图片。
再分享一下我老师大神的人工智能教程吧。零基础!通俗易懂!风趣幽默!还带黄段子!希望你也加入到我们人工智能的队伍中来!https://blog.csdn.net/jiangjunshow
原文地址:https://www.cnblogs.com/skinchqqhah/p/10351588.html
时间: 2024-10-08 04:46:07