Javascript 谷歌图表api的自定义标签和位置

我已经开始钻研使用谷歌图表来改善好友管理后端的用户可视化

我可以让它提取数据并显示他从Initial photoshop设计中要求的甜甜圈图表，但我正在努力研究和理解如何使用图表标签

我正在生成图表

var chart = new google.visualization.PieChart(document.getElementById('donut_1'));
chart.draw(data_donut1, {pieHole: .6,
    width: 155, height: 155,
    chartArea:{width:"90%",height:"90%"},
    legend: 'none',
    pieSliceBorderColor: '#16a085',
    backgroundColor: '#16a085',
    colors: ['#bae3db', '#5cbdaa'],
    enableInteractivity: false,
    tooltip: { trigger: 'none' } });
}

我的朋友想要的是将标签隐藏起来，并用css格式的文本在甜甜圈的中心显示最大值的标签

以下是我目前正在使用的JSFIDE；

这是我朋友想要的形象

谁能给我指一下正确的方向吗？ 我找不到如何更改标签，或者即使它可能只显示1值

我找到了“无”选项，可以将它们全部删除

---

但是如何才能让标签在1结果的中心显示值标签呢？

我找到了这个代码笔，它可能会帮助您：

创建一个将位于图表上方的div：

<div id="donutchart" class="col-xs-12 col-sm-6 col-md-4">
  <div id="chart"></div>
  <div id="labelOverlay">
    <p class="used-size">41<span>GB</span></p>
    <p class="total-size"> of 50GB</p>
  </div>
</div>

---

似乎你不能轻松地做到这一点：你不能将标签移动到你想要的地方——你必须用HTML创建标签，并在图表上/下分层。

#donutchart,
#chart {
  width: 500px;
  height: 500px;
  font-family: Arial;
}

#donutchart {
    position: relative;
}

#labelOverlay {
    width: 90px;
    height: 45px;
    position: absolute;
    top: 233px;
    left: 205px;
    text-align: center;
    cursor: default;
}

#labelOverlay p {
  line-height: 0.3;
  padding:0;
  margin: 8px;
}

#labelOverlay p.used-size {
  line-height: 0.5;
  font-size: 20pt;
  color: #8e8e8e;
}

#labelOverlay p.total-size {
  line-height: 0.5;
  font-size: 12pt;
      color: #cdcdcd;
    }