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，并设置以下样式属性：

表格单元格：

职位：亲属;

对于叠加div：

position：absolute;
宽度：与甜甜圈宽度相同
行高：与甜甜圈高度相同
text-align：center;

在表格单元格上设置属性position: relative，以便叠加div的绝对位置相对于单元格。 text-align属性水平居中文本，line-height属性垂直居中文字。

＆＃13;

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);
}

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 2

Google Visualization将SVG用于图形，因此如果我们想重新定位SVG HKEY_LOCAL_MACHINE\Software\Microsoft\GameOverlay，我们可以使用多种JavaScript方法。如果我们使用开发控制台并深入挖掘图表，我们最终将达到<text>元素的最低级别。请注意，有2个属性看起来像XY坐标。我编写了一个名为<text>的函数，它将操纵这些特定的属性，而AFAIK应该能够浏览大多数Google Visualization Chart SVG布局。

这个函数中有一堆注释掉的行，因为我要计算horz / vert center，但我发现centerText()标签没有<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>
*/

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>

在Google饼图甜甜圈中间添加标签

3 个答案: