1. 程式人生 > >HighCharts 餅圖背景色透明

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背景不為透明,則會遮蓋住背景圖片。


相關推薦

HighCharts 景色透明

預設的highcharts 背景都是白色,這次專案中需要在highcharts圖的後面顯示背景圖片,所以必須讓chart背景透明: function showPie(name){ var a = [ {name:'A',y:100,

highcharts

code border owin 技術分享 cti tex http spa att 效果: JSON加載數據: var chartseries2 = [ { name: ‘完成‘ + data.rate + ‘%‘, y: da

highcharts及點選事件

       highcharts是一個javascript圖表庫,支援曲線圖、柱狀圖、餅圖、散點圖等。具體的demo可檢視官方網站:highcharts示例        使用

AlertDialog彈出訊息後,景色透明,不影響Activity的事件觸發

背景色透明: // 背景色 dialog.getWindow().setDimAmount(0f); 不搶佔Activity焦點: // dialog不去搶佔焦

CSS3景色透明(相容IE8)

標準瀏覽器通過rgba()實現背景色透明;IE8以下瀏覽器通過特有濾鏡實現背景色透明。 程式碼如下: 1 1 /* IE8 */ 2 2 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColo

CSS3景色透明(兼容IE8)

數值 code sta microsoft tar start 進制 mage soft 標準瀏覽器通過rgba()實現背景色透明;IE8以下瀏覽器通過特有濾鏡實現背景色透明。 代碼如下: 1 1 /* IE8 */ 2 2 filter:progid:DXImageTr

如何讓iframe景色透明

<body style="background-color:transparent" > 或 <body bgColor="transparent"> 方法一: <iframe src="about.htm" width="100%" height="100%" align="

iTextSharp插入指定景色透明的圖片

iTextSharp用來處理PDF相當的強大,雖然作者專門寫了一本書介紹這個,但有些功能的資料還是太少了. iTextSharp可以直接插入具有透明度的PNG圖片, 但對於像BMP格式那些沒有透明度的圖片,在插入的時候還是可以對指定背景色透明的.關鍵程式碼如下: //建立

BufferedImage 和 Graphics2D 畫圖,景色透明

  File f = new File("D:\tag\20141204\chengxu\business-dossier\business-dossier-web\src\main\webapp\u

Highcharts構建空

blog 當前 art gravity sdn 增加 avi trac sso Highcharts構建空餅圖 空餅圖就是不包括不論什麽節點的餅圖。在Highcharts中,假設數據列不包括數據,會自己主動顯示空白。這樣瀏覽者無法推斷當前圖表為什麽類型。繪制一個空餅圖

DWR(AJAX)+Highcharts繪制曲線圖,

logging 數據類型 hid 一個 ext js xml 通過 for 源代碼下載 基本需求: 1. 在前臺會用DWR框架(或者AJAX)調用Java後臺代碼獲取要在Hightcharts展示的數據 2. 了解JSON(JavaScript

解決panel或者其他控件疊加時,此控件背景透明,顯示的景色為窗體景色問題

背景 運行 panel控件 box bsp www. com his art 之前為了圖省事兒,直接給Form窗體設置的背景圖片,發現這樣運行的時候窗體特別的卡頓,於是改為放一個pictureBox控件,由這個控件加載圖片後作為背景。 現在卡頓解決了,又出現了另一個問題,運

利用echarts highcharts 實現自定義地圖 關系效果 側邊3D柱形散點

技術 ges 散點圖 chart blog 餅圖 git 分享 charts github 地址: https://https://github.com/Gengshaoxuan/medataMap github 地址: https://https://github.c

功能列表設定 字段的 景色 標 字體顏色——JEPLUS快速開發平臺

字體顏色 背景顏色 JEPLUS功能列表設定 字段的 背景色 圖標 字體顏色 在我們使用JEPLUS進行列表配置時,想對一些特殊的字段進行樣式的渲染,今天我介紹下如何用JEPLUS列表配置出來我們想要的顏色。一、效果展示二、準備工作1、JEPLUS平臺5.0.0.22、

CAD看怎麽更改景色

背景 看圖軟件 我們 顏色 打開 導致 剛才 選項 下載 在使用CAD看圖軟件的時候,如果對背景顏色不滿意怎麽辦呢?如何使用CAD看圖更改背景色?下面來教大家更改背景顏色的方法。1、下載迅捷CAD看圖軟件。2、啟動CAD看圖軟件,並打開一張CAD圖紙,我們看見的背景色是白色

ps-如何去景色(將景色透明

背景圖 功能 eight block 選區 left 自己的 inf mar 由於生活或工作的需求,圖片的處理是必不可少。其中將圖片某一部分變為透明,或者截取圖片的某一部分比較常見。 1.首先,打開待處理的圖片; 2.復制背景圖層,將背景圖層設為不可見(左邊的眼睛即可

如何將CAD看軟件的景色更改為黑色?

朋友 怎麽 版本 安裝 進行 分享 alt 就是 找到 如何將CAD看圖軟件的背景色更改為黑色?在日常的工作中,我們最常接觸的就是CAD圖紙,但是在利用CAD看圖軟件對圖紙進行查看的時候,發現CAD看圖軟件的背景色和圖紙的背景色是一樣的,那要怎麽辦了,不用著急,可以將CAD

怎麽將CAD看軟件景色改成白色?

blog 步驟 電腦桌 行操作 迅捷 桌面 頁面 查找 ron 怎麽將CAD看圖軟件背景色改成白色?在打開一張CAD圖紙文件進行查看的時候,有的背景顏色不適合那就需要更改CAD看圖軟件的背景色,但是怎麽將CAD看圖軟件的背景色改成白色?具體要怎麽來進行操作了,下面小編就來教

highcharts 折線

一.折線圖(以時間為x軸) 先上一張效果圖 直接上程式碼 function graph(data) { $('#container').highcharts({ global:{ useUT

導航欄景色透明

需求: 導航欄和HeaderView 使用一個背景圖片。 解決方案: 讓 導航欄 變成透明。 override func viewWillAppear(_ animated: Bool) { super.viewWillAppear(animat