0

我一直在尝试构建一个与 WIX 兼容的圆环图。我需要图表具有某种交互性，至少需要鼠标悬停效果。

由于 Google API 没有甜甜圈图。我制作了两个饼图，目的是将较小的饼图放入另一个饼图中。我还使用了 pieHole 选项在每个饼图中创建了一个洞。

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

欢迎任何想法。先感谢您！

4

2 回答 2

3

您可以使用 pieHole 选项，将其设置为 0 到 1 之间的值。带有示例的 Api 文档。

于 2014-07-04T10:10:34.927 回答
0

看起来 Google Chart API 没有甜甜圈图选项......这个 bihappy post演示了如何通过在饼图顶部放置一个圆圈层来欺骗它：

在你的脑海中...

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("可视化", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
函数绘制图表（）{
       var data = new google.visualization.DataTable();
       data.addColumn('string', 'Task');
       data.addColumn('number', '每天的小时数');
       数据.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)]
       ]);
变量选项 = {
宽度：450，高度：300，
颜色：['#ECD078','#D95B43','#C02942','#542437','#53777A'],
图例：{位置：'无'}，
   动画：{
       持续时间：800，
       缓动：“在”
     }
};
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw（数据，选项）；
}
函数 roundNumber(num, dec) {
 var 结果 = Math.round(num*Math.pow(10,dec))/Math.pow(10,dec);
 返回结果；
}
</脚本>

在你的身体...

<div id="link_div" style="z-index: 3; position: absolute; left: 180px; top: 30px;">
<a href="javascript:drawChart()">更改数据</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>
于 2013-08-06T10:32:31.490 回答