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

【问题标题】：How to display labels outside the pie chart border?如何在饼图边框外显示标签？
【发布时间】：2019-10-18 03:45:07
【问题描述】：

我在 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>

【问题讨论】：

我可以建议禁用 chart.js 标签并创建自定义标签。（使用自定义标签旋转 div 的一些算法）。
有没有插件可以做到这一点？
我认为没有，但我希望没有很复杂的逻辑，特别是如果你已经从 ng2-chart 组件的输出中获得了所有百分比。这是 div 旋转的示例：getbootstrap.com/docs/4.3/examples/product（参见本网站的 html 和 css 代码）
你能写一个关于饼图的例子吗？会更有帮助。
在饼图周围添加一个div并旋转它，也会旋转其中的饼图。

标签： javascript angular chart.js ng2-charts

【解决方案1】：

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

Link for plugin

【讨论】：

【解决方案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

【讨论】：

您能否详细介绍第 2 步？我尝试导入到我的 module.ts 中，但不确定从那里导入什么。