在nvd3半圆甜甜圈图内显示文本

Question

在我的项目中，我正在使用nvd3图表。此特定图是半圆的饼图（甜甜圈图）。我能够成功绘制半圈甜甜圈图。下一个要求是在图表内动态显示少量值。那是行不通的。

这是我的数据：

{
key: "allocation",
values:
[[{x: "Lower my cholesterol", y: 207, individualEligiblePercent: "16.76"}]
[{x: "Total registered", y: 549}]]

[[{x: "Healthy pregnancy", y: 193, individualEligiblePercent: "15.63"}]
[{x: "Total registered", y: 549}]]

[[{x: "Master my finances", y: 130, individualEligiblePercent: "10.53"}]
[{x: "Total registered", y: 549}]]

[[{x: "Manage a health condition", y: 63, individualEligiblePercent: "5.10"}]
[{x: "Total registered", y: 549}]]
}

以下我编写的用于绘制图形的代码。

this.donutChartOptions = this.ChartHelper.options({
  type: 'pieChart',
  donut: true,
  donutRatio: 0.9,
  width: 280,
  height: 280,
  margin: {
    top: 10,
    right: 10,
    bottom: 10,
    left: 10
  },
  x: function (d) { return d.x; },
  y: function (d) { return d.y; },
  color: function (d, i) {
    return self.ChartHelper.hgPieChartColors[i];
  },
  pie: { 
    startAngle: function(d) { return d.startAngle / 2 - Math.PI / 2; }, 
    endAngle: function(d) { return d.endAngle / 2 - Math.PI / 2; },
    dispatch: {
      elementClick: function(e) {
        self.setSingleSegmentData(e.data.x);
      },
    }
  },
  showLabels: false,
  growOnHover: false,
  showLegend: false,
  titleOffset: -25,
  title: "TOTAL USERS"
});

在“用户总数”下，其应显示y: 63值。对于百分比（代替00％），它应显示individualEligiblePercent值。

查看页面代码：

<nvd3 [options]="donutChartOptions"
          [data]="chart"
          class="top-1">
</nvd3>

需求图是这样的：

但是我的代码在饼图下方生成。我什至无法编辑CSS。也想增加圆的周长。

这里绘制的图形数量只是一个描述，根据api响应是动态的。