标签：baidu 透明 false name color 背景色 href null HighCharts

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

标签：baidu,透明,false,name,color,背景色,href,null,HighCharts
来源： https://www.cnblogs.com/skinchqqhah/p/10351588.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。