如何在饼图边框之外显示标签？

Question

Pie Chart

我在Angular中使用了ng2-charts（chart.js）。我需要像饼图中的标签那样在饼图的边界之外放置标签。到目前为止，我已经禁用了lengend属性。我正在通过@Input()设置标签和背景色。我可以通过修改pieChartLegend属性将标签放置在上方/下方，但我需要将它们放置在边界之外。边框的位置将根据输入动态变化，但是边框外的标签将是静态的。

public pieChartOptions: ChartOptions = {
  responsive: true,
  legend: {
    display: false
  }
};

chartlabels: Label[] = [];
chartdata: SingleDataSet;

public chartType: ChartType = 'pie';
// public pieChartLegend = {display:true,position:'bottom'};
// public pieChartPlugins = [];

public chartcolors: Array<any> = [
  {
    backgroundColor: "",
    borderWidth: 1,
  }
];

<canvas baseChart 
    [data]="chartdata" 
    [labels]="chartlabels" 
    [chartType]="chartType"
    [colors]="chartcolors"
    [options]="pieChartOptions">
</canvas>

Answer 1

这可以使用插件'chartjs-plugin-labels'完成。在此插件中，有一个选项可以在饼图部分之外显示标签。计算完成后，将标签显示在饼图部分的中心（图表外部）。我修改了计算以在饼图部分的末尾显示标签。

Link for plugin