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

Question

Pie Chart

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

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

Answer 2

这个插件 chartjs-plugin-piechart-outlabels 对我有用。

第 1 步：npm 安装它 https://www.npmjs.com/package/chartjs-plugin-piechart-outlabels。

第 2 步：如果使用 Angular 框架，请像这样 import chartjs-plugin-piechart-outlabels.

将其导入到您的组件模块中

第 3 步：根据需要自定义 https://piechart-outlabels.netlify.app/options

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

How to display labels outside the pie chart border?

javascript

chart.js

ng2-charts

angular