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

Question

我已经开始深入研究使用谷歌图表来改善朋友管理后端的用户可视化效果，

我可以用它来获取数据并显示他从initiall 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格式的文本）

这是我目前正在处理的问题; http://jsfiddle.net/achudars/6M2sH/

这里是我朋友想要的可视化，

有人能指出我正确的方向吗？ 我无法找到如何更改标签，甚至可能只显示1值？

我找到了pieSliceText：'none'选项，可以将它们全部删除

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

Answer 1

我发现此codepen可能对您有帮助：https://codepen.io/cireriddler/pen/yyeLpE

创建一个将位于图表上方的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>

以及相应的CSS：

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