在Google API上構建甜甜圈圖表 - Pie中的Pie

Question

我一直在嘗試構建與WIX兼容的甜甜圈圖表。我需要圖表具有一定的交互性，至少需要鼠標懸停效果。

由於Google API沒有環形圖。我製作了兩張餅圖，目標是將較小的一張貼入另一張。我還使用了pieHole選項在每個餡餅中創建一個洞。

當我想出如何將兩個div放在另一個上面時，我現在正在努力解決圖片中顯示的問題。包含較小派的div覆蓋了更大派的div。我怎樣才能讓div的背景透明，同時保持內容（小餡餅）堅實？

歡迎任何想法。先謝謝你！

Answer 1

它看起來並不像谷歌圖表API有一個圓環圖選項... This bihappy post演示瞭如何欺騙，雖然它，通過放置一個圈層在餅圖的頂部：

在你頭...

 
<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
<script type="text/javascript"> 
google.load("visualization", "1", {packages:["corechart"]}); 
google.setOnLoadCallback(drawChart); 
function drawChart() { 
     var data = new google.visualization.DataTable(); 
     data.addColumn('string', 'Task'); 
     data.addColumn('number', 'Hours per Day'); 
     data.addRows([ 
     ['A', roundNumber(11*Math.random(),2)], 
     ['B',  roundNumber(2*Math.random(),2)], 
     ['C', roundNumber(2*Math.random(),2)], 
     ['D', roundNumber(2*Math.random(),2)], 
     ['E', roundNumber(7*Math.random(),2)] 
     ]); 
var options = { 
width: 450, height: 300, 
colors:['#ECD078','#D95B43','#C02942','#542437','#53777A'], 
legend: {position: 'none'}, 
    animation:{ 
     duration: 800, 
     easing: 'in' 
    } 
}; 
var chart = new google.visualization.PieChart(document.getElementById('chart_div')); 
chart.draw(data, options); 
} 
function roundNumber(num, dec) { 
var result = Math.round(num*Math.pow(10,dec))/Math.pow(10,dec); 
return result; 
} 
</script> 

在你的身體......

 
<div id="link_div" style="z-index: 3; position: absolute; left: 180px; top: 30px;"> 
<a href="javascript:drawChart()">Change Data</a> 

<div id="chart_div" style="z-index: 1; position: absolute; left: 0px; top: 20px;"></div> 
<div id="circle_div" style="z-index: 2; position: absolute; left: 180px; top: 127px;"> 
<img src="circle.png"></div> 

Answer 2

可以使用pieHole選項，在0和1之間Api docs with example其設置的東西。