Jquery中文网 www.jquerycn.cn
Jquery中文网 >  脚本编程  >  javascript  >  正文 HighCharts 饼图背景色透明的示例代码

HighCharts 饼图背景色透明的示例代码

发布时间:2015-03-30   编辑:www.jquerycn.cn
分享一例HighCharts 饼图的实现代码,与以往不同的是,这里实现了HighCharts 饼图背景色透明效果,有需要的朋友参考下吧。

本节内容:
HighCharts 饼图背景色透明的实现方法。

>>> 如果您不了解Highcharts为何物,请参考 Highcharts教程 中的相关内容。

默认的highcharts 背景都是白色,这次项目中需要在highcharts图的后面显示背景图片,所以必须让chart背景透明:
 

复制代码 代码示例:
function showPie(name){ 
    var a =  [ 
                    {name:'A',y:100,href:'http://www.jquerycn.cn',color:'#D587CE'}, 
                    {name:'B',y:30,href:'http://www.jquerycn.cn',color:'#34E3FF'}, 
                    {name:'C',y:10,href:'http://www.jquerycn.cn',color:'#8EF58B'}, 
                    {name:'D',y:10,href:'http://www.jquerycn.cn',color:'#F1FE19'}, 
                    {name:'E',y:5,href:'http://www.jquerycn.cn',color:'#F8E104'}, 
                    {name:'F',y:5,href:'http://www.jquerycn.cn',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个参数分别为,左右 上下 宽 和 高度,具体可以自行试验。

结果图,如下所示:
Highcharts饼图 背景透明

横杠处为背景图片,可以想象若chart背景不为透明,则会遮盖住背景图片。

就是这样了,在HighCharts 饼图中实现了背景色透明,希望对大家有所帮助。

您可能感兴趣的文章:
js图表组件highcharts简介
Highcharts 饼图
HighCharts 饼图背景色透明的示例代码
如何用VB6创建透明图象
php生成透明背景图片实例
Highcharts教程(13) Pie饼图与其他图形
Highcharts绘制饼图的简单实例
Highcharts 饼状图(结合PHP、Mysql)
Highcharts 渐变饼图
Highcharts 单色饼图

[关闭]