使用Google Chart创建多级甜甜圈图表

Question

我正在使用谷歌图表创建一个多级甜甜圈图表.我成功创建了单级图表.但现在我必须在该图表中创建另一个图表.请帮我.还有可能以圆形形式在图表切片上写文字吗？

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

HTML

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

JS

 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);
      }

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

Answer 1

这可以通过Google Image Charts API实现,该API在2012年已被弃用.它似乎仍然正常运行,它只是不再维护了.

使用该API,可以(现在仍然)创建同心饼图,如下图所示

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

产生以下饼图

您也可以使用API​​并轻松创建自己的饼图:http: //www.jonwinstanley.com/charts/

在新的Google Charts API中支持这种同心饼图仍然是一个悬而未决的问题