javascript - 谷歌图表 API 的自定义标签和位置

Question

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

我可以让它提取数据并显示他从最初的 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' } });
}

我的 friend 想要的是隐藏标签并在 donut 中心显示最大的值标签(带有css格式的文本)

这是我目前正在使用的jsfiddle； http://jsfiddle.net/achudars/6M2sH/

这是我 friend 想要的可视化，

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

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

但是我怎样才能让标签在第一个结果的中心显示值标签呢？

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