如何在饼图边框外显示标签？
如何在饼图边框外显示标签？
提问于 2019-10-18 11: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>回答 2
Stack Overflow用户
回答已采纳
发布于 2019-10-22 11:02:56
这可以使用插件'chartjs-plugin-labels‘来完成。在这个插件中，有一个选项可以在饼图区外显示标签。计算是为了在饼图部分的中心(图表外部)显示标签。我修改了计算，以便在饼图部分的末尾显示标签。
Stack Overflow用户
发布于 2020-05-23 04:42:32
这个插件chartjs-plugin-piechart-outlabels对我很有效。
步骤1: npm将其安装为https://www.npmjs.com/package/chartjs-plugin-piechart-outlabels。
步骤2:如果使用Angular框架，请将其导入到组件模块中，如下面的import chartjs-plugin-piechart-outlabels所示。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58443655
复制相关文章
相似问题
腾讯云开发者
