Saya sedang mengusahakan aplikasi yang besar dan sangat membantu untuk meletakkan label pada carta pai atau donat di luar carta itu sendiri.
Pemalam ini, outerLabels ialah apa yang saya cari, tetapi saya tidak boleh mendapatkannya untuk mengeluarkan apa-apa.
Saya tidak dapat mencari cara untuk mencapai perkara ini menggunakan Chart.js dan inilah yang saya terperangkap sekarang.
Saya telah mengimport pemalam
从'chartjs-plugin-outerlabels'导入{};
Juga suka import 'chartjs-plugin-outerlabels';
Berikut ialah contoh cara saya menetapkan pilihan carta:
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;
}
Berikut ialah contoh carta donat dalam projek itu sendiri:
Jika sesiapa boleh membantu memastikan pemalam ini berfungsi, atau mempunyai penyelesaian lain untuk membetulkannya, ia amat dihargai!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Ini berfungsi untuk saya tanpa medan
datalabels(kerana ia memerlukan pustaka Chartjs-plugin-datalabels.js untuk dipasang).Jadi pada asasnya
ChartOptionspersediaan adalah serupa dengan yang anda berikan.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; }Ini adalah cara untuk memaparkan carta kepada elemen kanvas.
@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;
}
Demo @ StackBlitz