Javascript 使用谷歌图表创建多级甜甜圈图表

我正在用谷歌图表创建一个多级甜甜圈图表。 我成功地创建了单级图表。但现在我必须在该图表中创建另一个图表。 请帮帮我。也可以在图表切片上以圆形形式书写文本吗

这是我的单圈甜甜圈聊天代码

HTML

这里是代码链接 应该是这样的

---

这是可能的，它在2012年被弃用。它似乎仍在运行，只是不再维护

使用该API，可以（现在仍然可以）创建同心饼图，如下图所示

http://chart.apis.google.com/chart?chd=s:Yr3，ff9&cht=pc&chs=300x200&chxr=0,20,45 | 1,25,50

这将生成下面的饼图

您还可以在此处使用API并轻松创建自己的饼图：

---

在新的Google Charts API中支持这种同心饼图仍然是

我知道这已经很久了，但这里有一种方法可以做到这一点，使用Google Charts：

但是，我删除了字幕，因为它们干扰了物体的位置，我认为如果我们做字幕会更容易更好。然后我就画了一些数学图来达到这个目的

您可以使用3个变量控制大小和孔

google.charts.load（'current'，{'packages'：['corechart']}）；
google.charts.setOnLoadCallback（drawChart）；
函数绘图图（）{
//控制在这里
假设大面积面积=400；
设alturaGraficoFora=400；
设furoGraficoFora=0.6；
var data=google.visualization.arrayToDataTable([
['Sabor de Pizza'、'Quantidade']，
['portuguesa'，30]，
[frango com catupiry'，30]，
['calabresa'，30]，
[alguma doce'，30]，
]);
变量选项={
宽度：大齿形，
高度：alturaGraficoFora，
图表区：{左：0，上：0，宽：100%，高：100%}，
pieHole:Furograficofrora，
图例：“无”
};
var chart=new google.visualization.PieChart（document.getElementById（'donut_1'）；
图表绘制（数据、选项）；
var data2=google.visualization.arrayToDataTable([
[‘努力’、‘给予的金额’]，
['python'，20]，
[c#，20]，
[javascript'，20]，
[php'，20]，
[sql server'，20]，
]);
var选项2={
图例：“无”，
宽度：大横截面积*横截面积，
高度：Alturagraficofrora*Furograficofrora，
图表区：{左：0，上：0，宽：100%，高：100%}，
背景色：“透明”，
图例：“无”
};
var chart2=新的google.visualization.PieChart（document.getElementById（'donut_2'）；
图表2.绘图（数据2，选项2）；
Ajustoposicapopicentral（大齿类、高齿类、长齿类）；
}
功能Ajusteposicapopiecentral（largura、altura、furo）{
yt=altura*（1+furo）/2.0；
xt=largura*（1-furo）/2.0；
var css=document.getElementById（'donut_2'）；
css.style.transform=“translate（“+xt+”px，-“+yt+”px）”；
}

Thankx@val感谢您的帮助。谢谢，没问题，很高兴我能帮忙！

  <script type="text/javascript" src="https://www.google.com/jsapi"></script> 
<div id="donutchart" style="width: 900px; height: 500px;"></div>

 google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work',     11],
          ['Eat',      2],
          ['Commute',  2],
          ['Watch TV', 2],
          ['Sleep',    7]
        ]);

        var options = {
          title: 'My Daily Activities',
          pieHole: 0.4,
            chartArea:{left: '100'},
         pieSliceText: 'label',
            pieStartAngle: 0,
            pieSliceTextStyle:{color: 'white', fontName: 'arial', fontSize: 10}
        };

        var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
        chart.draw(data, options);
      }