在Google API上构建圆环图 - 饼图中的饼图

Question

我一直在尝试制作与WIX兼容的圆环图。我需要图表有点互动，至少需要鼠标悬停效果。

由于Google API没有圆环图。我做了两个饼图，目标是将较小的一个放在另一个里面。我还使用了pieHole选项在每个馅饼内创建一个洞。

在我弄清楚如何将两个div放在一起之后，我现在正在努力解决图片中显示的问题。包含较小馅饼的div用较大的馅饼覆盖div。如何保持div的背景透明，同时保持内容（较小的饼）固定？

欢迎任何想法。提前谢谢！

Answer 1

您可以使用pieHole选项，将其设置为0到1之间的值。Api docs with example。

Answer 2

看起来Google Chart 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>