在Google餅圖甜甜圈中添加標籤

Question

我正在使用google圖表庫創建甜甜圈圖表。我想知道是否有可能在我的甜甜圈圖表中添加標籤，就像這樣：

我檢查了谷歌選項的說明並找不到任何東西。這裏是我如何生成我的圖表。

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
<script type="text/javascript"> 
    google.charts.load("visualization", "1", {packages:["corechart"]}); 
    google.charts.setOnLoadCallback(init);  
    function drawChart(myID,titler,known,unknown) { 
     var data = google.visualization.arrayToDataTable([ 
      ['Knowledge', 'Out of 10'], 
      ['Known',  known], 
      ['Unknown',  unknown] 
     ]); 
     var options = { 
      title: titler, 
      pieHole: 0.7, 
      colors: ['#000000', '#cdcdcd'], 
      pieSliceText: 'none', 
      legend:{position: 'none'}, 
      tooltip:{text:'percentage'}, 
      tooltip:{textStyle:{fontSize: 12}} 
     }; 

     var chart = new google.visualization.PieChart(document.getElementById(myID)); 
     chart.draw(data, options);  
     } 
     function init(){ 
      drawChart('donutchart1','VB.NET',8,2); 
      drawChart('donutchart2','Javascript',4,6); 
     } 
</script> 

而我的HTML樣式我的輸出：

<table class="Charts"> 
     <tr> 
      <td><div id="donutchart1" style="width: 256px; height: 256px;"></div></td> 
      <td><div id="donutchart2" style="width: 256px; height: 256px;"></div></td> 
     </tr> 
    </table> 

Answer 1

您可以添加一個疊加的div，中心每個圓環圖上，並設置下列樣式屬性：

對於表格單元格：

• position：relative;

對於覆蓋DIV：

• 位置：絕對;
• 寬度：相同甜甜圈寬度
• 行高：相同甜甜圈高度
• 文本對齊：中心;

屬性position: relative在表格單元格中設置，以便覆蓋div的絕對位置相對於單元格。 text-align屬性水平居中文本，line-height屬性垂直居中文本。

google.charts.load("visualization", "1", { packages: ["corechart"] }); 
 
google.charts.setOnLoadCallback(init); 
 
function drawChart(myID, titler, known, unknown) { 
 
    var data = google.visualization.arrayToDataTable([ 
 
     ['Knowledge', 'Out of 10'], 
 
     ['Known', known], 
 
     ['Unknown', unknown] 
 
    ]); 
 
    var options = { 
 
     title: titler, 
 
     pieHole: 0.7, 
 
     colors: ['#000000', '#cdcdcd'], 
 
     pieSliceText: 'none', 
 
     legend: { position: 'none' }, 
 
     tooltip: { text: 'percentage' }, 
 
     tooltip: { textStyle: { fontSize: 12 } } 
 
    }; 
 

 
    var chart = new google.visualization.PieChart(document.getElementById(myID)); 
 
    chart.draw(data, options); 
 
} 
 
function init() { 
 
    drawChart('donutchart1', 'VB.NET', 8, 2); 
 
    drawChart('donutchart2', 'Javascript', 4, 6); 
 
}

.donutCell 
 
{ 
 
    position: relative; 
 
} 
 

 
.donutDiv 
 
{ 
 
    width: 256px; 
 
    height: 256px; 
 
} 
 

 
.centerLabel 
 
{ 
 
    position: absolute; 
 
    left: 2px; 
 
    top: 2px; 
 
    width: 256px; 
 
    line-height: 256px; 
 
    text-align: center; 
 
    font-family: Arial, Helvetica, sans-serif; 
 
    font-size: 36px; 
 
    color: maroon; 
 
}

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
 
<table class="Charts"> 
 
    <tr> 
 
     <td class="donutCell"> 
 
      <div id="donutchart1" class="donutDiv"></div> 
 
      <div class="centerLabel">8/10</div> 
 
     </td> 
 
     <td class="donutCell"> 
 
      <div id="donutchart2" class="donutDiv"></div> 
 
      <div class="centerLabel">4/10</div> 
 
     </td> 
 
    </tr> 
 
</table>

Answer 2

谷歌可視化使用SVG的圖形，所以如果我們要重新定位的SVG <text>我們有一些JavaScript方法在我們的處置。如果我們使用開發控制檯並挖掘圖表，我們將最終達到<text>元素的最低級別。注意有2個屬性看起來像XY座標。我編寫了一個名爲centerText()的函數來操縱這些特定屬性，AFAIK應該能夠瀏覽大多數Google Visualization Chart SVG佈局。

有這個功能了一堆註釋掉行，因爲我要擁有它計算水平/垂直中心，但我發現了<text>標籤沒有一個<length>，所以我會離開，當我有更多的時間。

function centerText(chart, idx, X, Y) { 
     idx === 'undefined' || idx === null || idx === NaN ? 0 : idx; 
     var cht = document.querySelector(chart); 
     var txt = document.querySelectorAll(chart + " text"); 
     //var chW = cht.width/2; 
     //var chH = cht.height/2; 
     //var txW = txt[idx].width/2; 
     //var txH = txt[idx].height/2; 
     //var W = chW - txW; 
     //var H = chH - txH; 
     txt[idx].setAttribute('x', X); 
     txt[idx].setAttribute('y', Y); 
    } 
/* chart [string][REQUIRED ]: Id of chart - ex. #donutchart1 
|| idx [number][DEFAULT: 0]: Index number of <text> 
|| X  [number][REQUIRED ]: Set X coordinate of <text> 
|| Y  [number][REQUIRED ]: Set Y coordinate of <text> 
*/ 

代碼片段

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="UTF-8" /> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
 

 
    <title>Google Visualization Dohnut Chart Text Position</title> 
 
    <style> 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <table class="Charts"> 
 
    <tr> 
 
     <td> 
 
     <div id="donutchart1" style="width: 256px; height: 256px;"></div> 
 
     </td> 
 
     <td> 
 
     <div id="donutchart2" style="width: 256px; height: 256px;"></div> 
 
     </td> 
 
    </tr> 
 
    </table> 
 
    <script src="https://www.gstatic.com/charts/loader.js"></script> 
 
    <script> 
 
    google.charts.load("visualization", "1", { 
 
     packages: ["corechart"] 
 
    }); 
 
    google.charts.setOnLoadCallback(init); 
 

 

 
    function drawChart(chartID, heading, known, unknown) { 
 

 
     var chart = new google.visualization.PieChart(document.getElementById(chartID)); 
 
     var data = google.visualization.arrayToDataTable([ 
 
     ['Knowledge', 'Out of 10'], 
 
     ['Known', known], 
 
     ['Unknown', unknown] 
 
     ]); 
 
     var options = { 
 
     title: heading, 
 
     pieHole: 0.7, 
 
     colors: ['#000000', '#cdcdcd'], 
 
     pieSliceText: 'none', 
 
     legend: { 
 
      position: 'none' 
 
     }, 
 
     tooltip: { 
 
      text: 'percentage' 
 
     }, 
 
     tooltip: { 
 
      textStyle: { 
 
      fontSize: 12 
 
      } 
 
     } 
 
     }; 
 

 
     chart.draw(data, options); 
 
    } 
 

 
    function centerText(chart, idx, X, Y) { 
 
     var cht = document.querySelector(chart); 
 
     var txt = document.querySelectorAll(chart + " text"); 
 
     //var chW = cht.width/2; 
 
     //var chH = cht.height/2; 
 
     //var txW = txt[idx].width/2; 
 
     //var txH = txt[idx].height/2; 
 
     //var W = chW - txW; 
 
     //var H = chH - txH; 
 
     txt[idx].setAttribute('x', X); 
 
     txt[idx].setAttribute('y', Y); 
 
    } 
 

 
    function init() { 
 
     drawChart('donutchart1', 'VB.NET', 8, 2); 
 
     drawChart('donutchart2', 'Javascript', 4, 6); 
 
     centerText('#donutchart1', 0, 112, 130); 
 
     centerText('#donutchart2', 0, 106, 130); 
 
    } 
 
    </script> 
 
</body> 
 

 
</html>