Alihkan label data di luar carta pai atau donat - Chart.js

Question

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!

Answer 1

Ini berfungsi untuk saya tanpa medan datalabels (kerana ia memerlukan pustaka Chartjs-plugin-datalabels.js untuk dipasang).

Jadi pada asasnya ChartOptions persediaan adalah serupa dengan yang anda berikan.

import 'chartjs-plugin-outerlabels';

getPieChartOptions(chartTitle: string) {
  const options: ChartOptions<'doughnut'> = {
    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<'doughnut'>(ctx, {
    type: 'doughnut',
    data: {
      labels: [['Download', 'Sales'], ['In', 'Store', 'Sales'], 'Mail Sales'],
      datasets: [
        {
          data: [300, 500, 100],
        },
      ],
    },
    options: this.getPieChartOptions('doughnut'),
  } as ChartConfiguration<'doughnut'>).draw;
}

Demo @ StackBlitz