如何在饼图顶点图表上显示标签和值

Question

我正在使用角度应用程序中的顶点图表来显示图表。要制作饼图并想自定义饼图，请在饼图切片上按值显示标签，如所附图像中所示。找不到为此的任何解决方案，请帮助任何线索将非常有帮助。 谢谢。

屏幕截图[1]：https://i.stack.imgur.com/vMcHk.png

import { ChartComponent, ApexLegend, ApexDataLabels, ApexFill, ApexPlotOptions, ApexNonAxisChartSeries, ApexResponsive, ApexChart } from 'ng-apexcharts';

export interface ChartOptions {
  series: ApexNonAxisChartSeries;
  chart: ApexChart;
  responsive: ApexResponsive[];
  labels: any[];
  legend: ApexLegend;
  dataLabels: ApexDataLabels;
  fill: ApexFill;
  plotOptions: ApexPlotOptions;
}

export class PieChartComponent implements OnInit {
  @ViewChild('chart') chart: ChartComponent;
  public chartOptions: Partial<ChartOptions>;

  constructor() {}

  ngOnInit(): void {
    this.chartOptions = {
      series: [70.48, 29.52],
      chart: {
        width: 380,
        type: 'pie',
        toolbar: {
          tools: {
            download: false,
          },
        },
      },
      legend: {
        show: false,
      },
      labels: ['DII', 'FII'],
      fill: {
        colors: ['#ffe163', '#694fb6'],
      },
      plotOptions: {
        pie: {
          startAngle: 110,
        },
      },
      dataLabels: {
        style: {
          fontSize: '14',
          fontWeight: '600',
          colors: ['#000000', '#ffffff'],
        },
        // formatter: function (val) {
        //   return val + "%";
        // }
      },
      responsive: [
        {
          breakpoint: 480,
          options: {
            chart: {
              width: 400,
            },
            legend: {
              position: 'bottom',
            },
          },
        },
      ],
    };
  }
}

<apx-chart
    [series]="chartOptions.series"
    [chart]="chartOptions.chart"
    [labels]="chartOptions.labels"
    [responsive]="chartOptions.responsive"
    [legend]="chartOptions.legend"
    [dataLabels]="chartOptions.dataLabels"
    [fill]="chartOptions.fill"
    [plotOptions]="chartOptions.plotOptions"
  ></apx-chart>