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

我正在使用Google图表库创建甜甜圈图。我想知道是否可以在甜甜圈图的中间添加标签，如下所示:


我检查了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>

最佳答案

您可以添加一个以每个甜甜圈图为中心的叠加div，并设置以下样式属性:

对于表格单元格:

position:relative；

对于叠加层div:

position:绝对;

width:与甜甜圈宽度

相同

line-height:与甜甜圈高度

相同

text-align:center;

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

关于javascript - 在Google饼图甜甜圈中间添加标签，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41364245/