默认的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