15

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

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

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 中的代码链接应该看起来像 在此处输入图像描述

4

2 回答 2

10

这可以通过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 中支持这种同心饼图仍然是一个悬而未决的问题

于 2015-12-07T04:58:20.593 回答
3

我知道这是很久以前的事了，但这里有一种方法可以做到这一点，使用谷歌图表：

但是，我删除了字幕，因为它们会干扰物体的位置，我认为如果我们做字幕会更容易更好。然后我只是做了一些图纸和数学来实现这一点。

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

 google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
      
        //control is here
        let larguraGraficoFora = 400;
        let alturaGraficoFora = 400;
        let furoGraficoFora = 0.6;

        var data = google.visualization.arrayToDataTable([
          ['Sabor de Pizza', 'Quantidade'],
          ['portuguesa',     30],
          ['frango com catupiry',     30],
          ['calabresa',     30],
          ['alguma doce',     30],
        ]);

        var options = {
          width: larguraGraficoFora,
          height: alturaGraficoFora,
          chartArea:{left:0,top:0,width:'100%',height:'100%'},
          pieHole: furoGraficoFora,
          legend: 'none'
        };

        var chart = new google.visualization.PieChart(document.getElementById('donut_1'));
        chart.draw(data, options);
        
        var data2 = google.visualization.arrayToDataTable([
          ['Effort', 'Amount given'],
          ['python',     20],
          ['c#',     20],
          ['javascript',     20],
          ['php',     20],
          ['sql server',     20],
        ]);

        var options2 = {
            legend:'none',
          width: larguraGraficoFora*furoGraficoFora,
          height: alturaGraficoFora*furoGraficoFora,
          chartArea:{left:0,top:0,width:'100%',height:'100%'},
          backgroundColor: 'transparent',
          legend: 'none'
        };

        var chart2 = new google.visualization.PieChart(document.getElementById('donut_2'));
        chart2.draw(data2, options2);
            ajustePosicaoPieCentral(larguraGraficoFora, alturaGraficoFora, furoGraficoFora);
      }
      
      
        function ajustePosicaoPieCentral(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)";
        }
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
       <div id="donut_1" ></div>
       <div id="donut_2"></div>

于 2021-01-06T15:39:39.023 回答