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

原文地址:https://www.cnblogs.com/skinchqqhah/p/10351588.html

时间: 2024-10-08 04:46:07

HighCharts 饼图背景色透明的相关文章

背景色透明,内容不透明,适用所有浏览器(转)

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 3 <html xmlns="http://www.w3.org/1999/xhtml"> 4 <head> 5 <meta http-equiv=&quo

iOS设置UITableViewCell的背景色透明和选中颜色的方法

1.设置UITableViewCell的背景色透明方法: cell.backgroundColor=[UIColor clearColor]; 或者设置颜色透明度为0: cell.backgroundColor = [UIColor colorWithWhite:0.0f alpha:0.0f]; 2.设置UITableViewCell的选中颜色的方法:     UIView *view = [[UIView alloc]init];     view.backgroundColor=[UICo

CSS3背景色透明(兼容IE8)

标准浏览器通过rgba()实现背景色透明;IE8以下浏览器通过特有滤镜实现背景色透明. 代码如下: 1 1 /* IE8 */ 2 2 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000); 3 3 4 4 /* 标准浏览器 */ 5 5 background-color: rgba(0, 0, 0, 0.6); 上述代码中: 7F000000(十六进制):

highCharts 饼图动态加载

饼图的动态加载 (1):导入样式 <script type="text/javascript" src="<%=request.getContextPath()%>/boot_js/jquery/jquery-1.8.3.min.js"></script><script type="text/javascript" src="<%=request.getContextPath()%>

highcharts饼图

效果: JSON加载数据: var chartseries2 = [ { name: '完成' + data.rate + '%', y: data.rate }, { name: '未完成' + data.rateless + '%', y: data.rateless }]; chart2.series[0].setData(chartseries2); 定义: chart2 = new Highcharts.Chart({ chart: { plotBackgroundColor: nul

FusionCharts和highcharts 饼图区别!

FusionCharts ---------------脚本--------------- <script src="../../../fashioncharts/js/FusionCharts.js" type="text/javascript"></script> ---------html---------- <div id="container"> </div> --------------

highcharts 饼图显示数据比例如何保留二位小数

var NewPerCent=parseFloat(NewPerCent.toString()).toFixed(2);return '<b>'+ this.point.name +'</b>: '+ Highcharts.numberFormat(this.percentage) +' %';

弹出框背景色透明滚动条滚动仍然居中

弹出框div: <div class="webbox" style=""> <div class="webboxtop"> <span class="tstitle">发货网点(收货网点)</span> <a href="#" class="closebox"></a> </div> <div cl

使用rgba色实现背景色透明

父元素css属性:background-color: #000;  background: rgba(0,0,0,.5); //现代浏览器属性,使用rgba色实现透明,对子属性不继承  filter: progid:DXImageTransform.Microsoft.Alpha(opacity = 50); //兼容IE8以下 子元素属性:  position: relative;  //对IE8以下禁止继承透明色