在谷歌饼图甜甜圈中间添加标签

Question

我正在使用谷歌图表库来创建圆环图。我想知道是否可以在我的圆环图中间添加一个标签，就像这样：

我检查了谷歌选项的描述，但找不到任何东西。这是我生成图表的方式。

<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，以每个圆环图为中心，并设置以下样式属性：

对于表格单元格：

• 位置：相对；

对于覆盖 div：

• 位置：绝对；
• 宽度：与甜甜圈宽度相同
• line-height：与甜甜圈高度相同
• 文本对齐：居中；

在表格单元格上设置属性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

Google Visualization 将 SVG 用于图形，因此如果我们想要重新定位 SVG <text>，我们可以使用许多 JavaScript 方法。如果我们使用 Dev Console 并深入研究图表，我们将最终到达最低级别，即 <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>

Answer 3

我只想自动化@zer00ne 答案，这样我们就不必手动设置 X 和 Y。无论文本的长度如何，文本将始终位于中心

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
    <title>Google Visualization Dohnut Chart Text Position</title>
    <style>
      
      #test_font{
          position: absolute;
          visibility: hidden;
          height: auto;
          width: auto;
          white-space: nowrap;
      }
      
    </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>
    <div id="test_font"></div>
    <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) {
        var cht = document.querySelector(chart);
          var txt = document.querySelector(chart + " text");
          var test_txt = document.querySelector('#test_font');
          test_txt.innerHTML = txt.innerHTML;
          test_txt.style.fontFamily = txt.getAttribute('font-family');
          test_txt.style.fontSize = txt.getAttribute('font-size') + 'px';
          test_txt.style.fontWeight = txt.getAttribute('font-weight');
          var X = (cht.clientWidth-test_txt.clientWidth)/2;
          var Y = ((cht.clientHeight-test_txt.clientHeight)/2) + 1*document.querySelectorAll(chart + " rect").item(1).getAttribute('height');
          txt.setAttribute('x', X);
          txt.setAttribute('y', Y);
        }

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