Verschieben Sie Datenbeschriftungen außerhalb des Kreis- oder Donutdiagramms – Chart.js

Question

Ich arbeite an einer großen Anwendung und es wäre sehr hilfreich, Beschriftungen auf einem Kreis- oder Donutdiagramm außerhalb des Diagramms selbst zu platzieren.

Dieses Plugin, OuterLabels, ist genau das, was ich suche, aber ich kann es nicht dazu bringen, etwas auszugeben.

Ich konnte mit Chart.js keine Möglichkeit finden, dies zu erreichen, also bleibe ich jetzt dabei.

Ich habe das Plugin importiert 从'chartjs-plugin-outerlabels'导入{}; Auch gern import 'chartjs-plugin-outerlabels';

Hier ist ein Beispiel dafür, wie ich die Diagrammoptionen einstelle:

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

Hier ist ein Beispiel für ein Donut-Diagramm innerhalb des Projekts selbst:

Wenn jemand helfen kann, dieses Plugin zum Laufen zu bringen, oder eine andere Lösung hat, um das Problem zu beheben, wäre ich sehr dankbar!

Answer 1

这对我来说没有 datalabels 字段（因为它需要安装 Chartjs-plugin-datalabels.js 库）。

所以基本上 ChartOptions 设置与您提供的设置类似。

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

这就是如何将图表渲染到画布元素。

@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;
}

演示 @ StackBlitz