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