我正在开发一个大型应用程序，将标签放置在图表本身之外的饼图或圆环图上会非常有帮助。
这个插件，outerLabels 正是我正在寻找的，但我无法让它输出任何内容。
我一直无法找到使用 Chart.js 完成此任务的方法，这就是我现在所坚持的方法。
我已经导入了插件
从'chartjs-plugin-outerlabels'导入{};
也喜欢 import 'chartjs-plugin-outerlabels';
以下是我如何设置图表选项的示例：
function getPieChartOptions(chartTitle: string) {
const options: ChartOptions = {
responsive: true,
plugins: {
outerLabels: {
fontNormalSize: 12,
fontNormalFamily: 'sans-serif',
},
legend: {
display: true,
labels: {
usePointStyle: true,
font: {
family: 'sans-serif',
size: 12,
}
}
},
title: {
display: true,
text: chartTitle,
color: 'black',
padding: 5,
font: {
size: 16,
family: 'sans-serif',
}
},
datalabels: {
color: 'white',
formatter: commas.format,
}
},
};
return options;
}
以下是项目本身内的圆环图示例：
如果有人可以帮助让这个插件正常工作，或者有其他解决方案来解决这个问题，我们将不胜感激！
这对我来说没有
datalabels字段（因为它需要安装 Chartjs-plugin-datalabels.js 库）。所以基本上
ChartOptions设置与您提供的设置类似。import 'chartjs-plugin-outerlabels'; getPieChartOptions(chartTitle: string) { const options: ChartOptions = { responsive: true, plugins: { outerLabels: { fontNormalSize: 12, fontNormalFamily: 'sans-serif', }, legend: { display: true, labels: { usePointStyle: true, font: { family: 'sans-serif', size: 12, }, }, }, title: { display: true, text: chartTitle, color: 'black', padding: 5, font: { size: 16, family: 'sans-serif', }, }, tooltip: { enabled: false, }, }, }; return options; }这就是如何将图表渲染到画布元素。
@ViewChild('MyChart', { static: true }) chart: ElementRef;
ngAfterViewInit() {
const ctx = this.chart.nativeElement.getContext('2d');
new Chart(ctx, {
type: 'doughnut',
data: {
labels: [['Download', 'Sales'], ['In', 'Store', 'Sales'], 'Mail Sales'],
datasets: [
{
data: [300, 500, 100],
},
],
},
options: this.getPieChartOptions('doughnut'),
} as ChartConfiguration).draw;
}
演示 @ StackBlitz