使用 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 中支持這種同心餅圖仍然是一個懸而未決的問題

Answer 2

我知道這已經是很久以前的事了，但這里有一種方法可以做到這一點，使用谷歌圖表：

但是，我刪除了字幕，因為它們會干擾物體的位置，我認為如果我們做字幕會更容易也更好。 然后我只是做了一些繪圖和數學來實現這一點。

您可以使用 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>