Show text inside nvd3 half circle donut chart

问题

In my project I am using nvd3 chart. This particular graph is a piechart(donut chart) which is half circle. I am successfully able to plot the half circle donut chart. The next requirement is to show few values dynamically inside the chart. That is not working.

Here is my data:

{
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}]]
}

Below code I have written to plot the graph.

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

Beneath TOTAL USERS it should show y: 63 value. For percentage(in place of 00%) it should show individualEligiblePercent value.

View page code:

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

The requirement graph is like this :

But my code generates below pie chart. I am not even able to edit the css. Also want to increase the circumference of circle.

The number of graphs plotted here is just a depiction, they are dynamic as per the api response.

来源：https://stackoverflow.com/questions/62940868/show-text-inside-nvd3-half-circle-donut-chart