在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>