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

Answer 2

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

Link for plugin

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

2 个答案: